Old browser

This article shows off HTML5 features, don't you think it would be a good idea to read it with a browser that supports these features so you can see them?

Simple Smooth Scrolling

Not all browsers implement smooth scrolling. In this article, we'll see how to implement this effect with a few lines of javascript using DOM Events and RequestAnimationFrame.

For obvious reasons, the effect is not visible on touch devices.

You are free to copy, modify and use this code as you wish.

Code

Here's what we need to do:

  • Capture mouse wheel events
  • Detect the amount to scroll in pixels
  • Prevent event bubbling/propagation
  • Scroll smoothly by gradually decreasing the speed
As usual, nothing is easy, because there are 2 incompatible ways to capture and manage those events: the DOMMouseScroll event works on Firefox 2+ and returns the scroll amount in ticks, the mousewheel event works on all other browsers except IE8- and returns the scroll amount in pixels.
There is also a third way (attachEvent mousewheel), which is for old versions of IE (IE8-) and is deprecated. I did not implement this listener.
But let's get to the code:
Loading...
Please note that this is a very simple solution: if you need something more flexible, there are much more sophisticated plugins for jQuery that do this. However, they're not 800 bytes.

How to use it

To enable smooth scrolling on the entire page, simply use

smoothScroll();
Note that this does not spread to child elements.

To enable smooth scrolling on an element, use

smoothScroll(document.getElementById("id"));

You can also specify a callback function that will be executed at each frame, right after scrolling. This allows things like a parallax effect to be perfectly synchronized with the scroll.

smoothScroll(element,function(){...code...});

Once smoothScroll is initialized on an element, the scrollTo function allows you to scroll to a specific position, such as a specific child.

e.scrollTo(e.childNodes[3].offsetTop); //scrolls to the third element inside e.

Example

Element without smooth scrolling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel semper turpis. Aenean ut mi vitae sapien dapibus aliquet. Sed at tellus a ex mollis pretium. Morbi imperdiet rhoncus rhoncus. Ut non arcu sed sem malesuada rhoncus ac eget enim. Fusce elit urna, vestibulum ut nisi et, tincidunt pharetra nisl. Nullam tristique malesuada quam et condimentum. Vestibulum luctus eleifend rhoncus. Pellentesque rutrum eu lorem vitae feugiat.

Nam ut orci orci. In suscipit in massa eget imperdiet. Integer nec vestibulum felis, sed commodo odio. Aliquam in tempus elit. Cras rutrum, lacus sed tincidunt ullamcorper, quam enim varius dui, a auctor leo nulla sit amet erat. Proin elementum felis vel pellentesque consequat. Donec ullamcorper mollis sagittis. Suspendisse potenti. Sed eu dapibus metus. Cras ut ligula nunc. In quis quam ipsum. Fusce sed velit molestie, elementum dolor nec, tempor odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nulla a finibus ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam ante eros, congue a pellentesque a, luctus lacinia nulla. Praesent eget lectus felis. Integer consequat ex vel dignissim elementum. Mauris luctus consequat metus non eleifend. Vivamus nec aliquet quam, ullamcorper varius leo. Phasellus porttitor massa a posuere semper. Proin vitae pellentesque sapien. Curabitur ut accumsan massa, eget maximus metus. Donec commodo turpis ut aliquet consequat. Donec vestibulum magna ut posuere suscipit. Maecenas id eros ac ante rhoncus ultricies eu mattis ipsum.

Integer quis metus nisl. Nunc rhoncus nisl nec purus rutrum lobortis. Nunc tristique ipsum at aliquam sollicitudin. Donec fermentum lacus sed mauris molestie, et tempus risus venenatis. Mauris luctus ultricies quam, nec dictum dui sollicitudin quis. Fusce ullamcorper tincidunt arcu nec sodales. Pellentesque sit amet sem non odio blandit ullamcorper et sed nulla. Donec at dui malesuada, pellentesque mi eleifend, semper nisi. Nunc et placerat ante. Sed nisi magna, dictum in pellentesque accumsan, tincidunt nec diam.

Aliquam dignissim elementum elementum. Pellentesque at sapien interdum turpis commodo eleifend. Aenean dapibus sollicitudin ex, sed auctor eros scelerisque quis. Integer arcu sem, posuere ac nisi nec, fringilla volutpat diam. Fusce leo nunc, vestibulum nec ultrices sed, interdum sed turpis. Duis finibus velit vitae velit tempus commodo. Etiam sit amet tellus consequat, consequat risus a, dignissim urna. Phasellus non felis nunc. Suspendisse id dui accumsan, dapibus nisi in, congue turpis. Nullam nisi sem, mollis eu egestas ac, bibendum nec magna. Donec laoreet neque ipsum, in accumsan erat rhoncus a. Integer iaculis hendrerit quam, et bibendum nibh luctus nec. Etiam ultrices mollis sodales. Duis a accumsan arcu, a malesuada ante. Fusce faucibus eros et dolor lacinia, quis eleifend diam scelerisque. Nunc ac mauris non diam semper lacinia vel in massa.
Element with smooth scrolling

Share this article

Comments