Here’s an example of inertial scrolling without a lot of elaborate plugin business going all over the place.
The scroll position on web pages can be controlled by simply setting
document.body.scrollTop. Other than that there’s only a couple of things you need for inertial scrolling:
A function that tells you how far to move the scroll position based on the time. We want one that gives the impression of inertia, so it’d dictate relatively slow movement at first, then ramp up, then slow down.
d3.easeprovides a cubic function like the easeInOutCubic here.
A timer that updates at intervals so that you can call the easing function to figure out where the scroll position should be and update the scroll position.
That’s what the example does. If you want to keep your code as small as possible, you can use D3 Smash to make yourself a little build of D3 that includes only the transition module, which is where
You can try it out down here: