Web browsing has been a very important part of our day. We browse the web for work, educational purposes, and even for leisure. And web browsing means, for sure, having to scroll many times. Scrolling is an important part of browsing websites.

However, the type of scroll that follows our mouse wheel or finger gesture is not always the same. There are times when, after stopping swiping or scrolling, the display keeps scrolling. How’s that possible? Apart from software implementation, there are some devices that give you this possibility: the kinetic scrolling devices. But what are these kinds of devices?

Well, before jumping into this question, we need to understand first what is kinetic scrolling, also known as inertial scrolling.

What is Kinetic Scrolling?

Kinetic scrolling (inertial scrolling) is when the display continues to move up or down even after the user has stopped scrolling or swiping. Instead of stopping right away, the scrolling slows down into a stop. It has “inertia”. Just in real life when you move objects.

Desandro puts it very well on the first few seconds of this talk:

Intertial scrolling is very common in touch-screen devices. That’s because the dragging gesture itself is demanding some kind of inertia. Think about it: in the real world, when you “grab” something to drag it far away from you, the logical behavior is throwing it away with some momentum. The same happens in the virtual world.

There are claims that it was invented in the mid-2000s, but some also say that this technique has been used even during the early 1990s. There had been lots of debates about authorship and patent but I will not jump into that. What’s clear is that it has been used a lot and many have benefited with inertial scrolling GUI-wise.

Kinetic Scrolling Example

The best thing to understand what’s kinetic scrolling is seeing the effect with your own eyes with an example:

So now that we understand what is inertial Scrolling, we can step into our main question.

What is an Inertial Scrolling Device?

Kinetic scrolling devices are devices that enable users to do inertial scrolling. These include trackpads and some kinds of mice (like Apple Magic Mouse). With these devices, a single swipe lets you scroll multiple display lines. Depending on how strong you flicked, it will have more momentum or less.

Nowadays, it is very common to find this kinetic scrolling function developed by software using a javascript library. That’s the case of this Drag and Move extension from Álvaro Trigo's fullPage.js library.

However, the kinetic scrolling devices directly include this feature in its software: they allow you to do inertial scrolling anywhere and not just in a specific website that has allowed this kind of scrolling. Let’s see them and how they help users.

How Kinetic Scrolling Devices Help Users

People (like me) takes advantage of kinetic scrolling devices to be able to navigate more conveniently and efficiently.

Easily search through a webpage you previously visited and want to continue reading where you left off. It is quicker to go to the desired section of the web page with inertial scrolling. It also makes it easier to go to the bottom or the top of a webpage.

Another thing is that, though I am not sure if many people will agree with me, I find it eye-satisfying to read and browse documents with inertial scrolling.

However, not all web users are a fan of inertial scrolling. That is why there is an option for Mac users to use or not use scrolling with inertia.

Mac without inertia scrolling

Developer Issues With Kinetic Scrolling Devices

There are times when developers need to detect if the user made a single swipe or a flick, and kinetic scrolling devices make it difficult to do that.

Some plugins are translating user’s scroll events to produce an action or animation in a webpage (like in scroll hijacking). But it usually encounters a problem with kinetic scrolling where a swipe often causes some section/s, page/s to be skipped.

Some attempts and workarounds try to provide a solution to this issue but still, none can provide a guarantee that it will not yield any false negatives.

While there is still virtually no way to detect a single swipe, fullpage.js provides solutions that have been known to work with issues of double scrolls. You can browse through the [extensionsxan open-source of ideas and forums to help further with the solution your website needs.