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:

Scroll to a middle element
Scroll to the bottom element
Hooligan
Muscleman
Tough Guy
Bullyboy
Tearaway
Plug-Ugly
Chav
Muscle
Skinhead
Skinhead (10th level)
Yob
Yob of the Body
Yob of Feelings
Yob of the Mind
Yob of the Mind (15th level)
Yob of the Mind (16th level)

Technologist
Hacker
Cyberpunk
Applied Scientist
Cyber-Terrorist
Engineer
Computer User
Scroll to the top element
Middle Element
Scroll to the bottom element
Cracker
Programmer
Programmer (10th level)
Chief Programmer
Master Programmer
Grandmaster Programmer
Grandmaster Programmer (14th level)

Bun
Bunny
Sciurine
Con
Rodent
Rodent (6th level)
Rodent (7th level)
Rodent (8th level)
Rodent (9th level)
Squirrel
Squirrel (11th level)
Squirrel (12th level)
Expert Squirrel
Prime Squirrel
Scroll to a middle element
Scroll to the top element