Simple inertial scrolling

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.ease provides 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 d3.timer and d3.ease live.

If you want to keep it really small, you can just grab a cubic ease-in-ease-out function from somewhere and use plain JavaScript’s setInterval.

You can try it out down here: