If you are familiar with trackpads or you are a developer, you probably have heard of the term “Kinetic scrolling”. Scrolling is an important part of any software, app, or website, so knowing what is kinetic scrolling might be of vital importance.
Perhaps you didn’t know about it, but there isn’t just a single scrolling behavior. The effect of the scroll you generate when moving your mouse wheel or using a finger gesture is not always the same.
There are times when, after you stop swiping or scrolling, the page/app keeps scrolling. How’s that possible? This is what we call kinetic scrolling devices.
But what are these kinds of devices?
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 all of a sudden, the scrolling slows down its speed until it completely stops. It has “inertia”. Just in real life when you move objects.
Desandro puts it very well in 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 from inertial scrolling GUI-wise.
Kinetic Scrolling Example
The best thing to understand what 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 their software: they allow you to do inertial scrolling anywhere and not just on 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 take advantage of kinetic scrolling devices to be able to navigate more conveniently and efficiently.
Kinetic scrolling makes it much quicker to go to the desired section of the web page thanks to the inertial scrolling behavior. It also makes it easier to go to the bottom or the top of a webpage.
Why? Because you can decide the speed at which you want to scroll (fast swipe vs slow) and the scrolling will still take place for a few seconds after you take your fingers away from your trackpad/touch screen/wheel.
Also, I personally find it super satisfying to read and browse documents with inertial scrolling. It just feels natural.
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.
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 use scroll events to trigger actions or produce animations in a webpage (like when using scroll hijacking techniques). But they usually encounter problems with kinetic scrolling due to a single swipe resulting in some sections, pages, or animations being skipped or played faster than expected.
There are some attempts and workarounds that try to provide a solution to this issue but still, none can provide a guarantee that it will not yield some false positives.
While there is still virtually no way to detect a single swipe, components like fullpage.js, for example, provide an acceptable solution to the issue of the double scroll.
