{"id":5243,"date":"2021-10-01T02:00:00","date_gmt":"2021-10-01T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/kinetic-scrolling\/"},"modified":"2024-02-05T20:15:07","modified_gmt":"2024-02-05T19:15:07","slug":"kinetic-scrolling","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/kinetic-scrolling\/","title":{"rendered":"What is a Kinetic Scrolling Device?"},"content":{"rendered":"\n<p>If you are familiar with trackpads or you are a developer, you probably have heard of the term <strong>&#8220;Kinetic scrolling&#8221;<\/strong>. Scrolling is an important part of any software, app, or website, so knowing what is kinetic scrolling might be of vital importance.<\/p>\n\n\n\n<p>Perhaps you didn&#8217;t know about it, but <strong>there isn&#8217;t just a single scrolling behavior<\/strong>. The effect of the scroll you generate when moving your mouse wheel or using a finger gesture is not always the same.<\/p>\n\n\n\n<p>There are times when, after you stop swiping or scrolling, the page\/app keeps scrolling. How\u2019s that possible? This is what we call <strong>kinetic scrolling devices<\/strong>.<\/p>\n\n\n\n<p>But what are these kinds of devices?<\/p>\n\n\n\n<p>Before jumping into this question, we need to understand first <strong>what is kinetic scrolling<\/strong>, also known as inertial scrolling.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-kinetic-scrolling%3F\">What is Kinetic Scrolling?<\/h2>\n\n\n\n<p><strong>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 \u201cinertia\u201d. Just in real life when you move objects.<\/strong><\/p>\n\n\n\n<p>Desandro puts it very well in the first few seconds of this talk:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Practical UI physics\" width=\"500\" height=\"281\" data-src=\"https:\/\/www.youtube.com\/embed\/90oMnMFozEE?start=163&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Intertial scrolling is <strong>very common in touch-screen devices<\/strong>. That\u2019s because the dragging gesture itself is demanding some kind of inertia.<\/p>\n\n\n\n<p>Think about it: in the real world, when you \u201cgrab\u201d 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.<\/p>\n\n\n\n<p>There are claims that it was <strong>invented in the mid-2000s<\/strong>, but some also say that this technique has been used even during the early 1990s.<\/p>\n\n\n\n<p>There had been lots of debates about authorship and patent but I will not jump into that. What\u2019s clear is that it has been used a lot and many have benefited from inertial scrolling GUI-wise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"kinetic-scrolling-example\">Kinetic Scrolling Example<\/h3>\n\n\n\n<p>The best thing to understand what kinetic scrolling is seeing the effect with your own eyes with an <strong>example<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Map kinetic scroll\" width=\"500\" height=\"281\" data-src=\"https:\/\/www.youtube.com\/embed\/8dvK03rZSrI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>So now that we understand what is inertial Scrolling, we can step into our main question.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-an-inertial-scrolling-device%3F\">What is an Inertial Scrolling Device?<\/h2>\n\n\n\n<p><strong>Kinetic scrolling devices are devices that enable users to do inertial scrolling. These include trackpads and some kinds of mice (like <a href=\"https:\/\/alvarotrigo.com\/blog\/magic-mouse-1vs2\/\">Apple Magic Mouse<\/a>).<\/strong> 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.<\/p>\n\n\n\n<p>Nowadays,  it is very common to find this kinetic scrolling function developed by software using a javascript library. That\u2019s the case of this <a href=\"https:\/\/alvarotrigo.com\/fullPage\/extensions\/drag-and-move.html\">Drag and Move extension<\/a> from \u00c1lvaro Trigo&#8217;s <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js library<\/a>.<\/p>\n\n\n\n<p>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\u2019s see them and how they help users.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-kinetic-scrolling-devices-help-users\">How Kinetic Scrolling Devices Help Users<\/h3>\n\n\n\n<p>People like me take advantage of kinetic scrolling devices to be able to <strong>navigate more conveniently and efficiently.<\/strong><\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Also, I personally find it super satisfying to read and browse documents with inertial scrolling. It just feels natural.<\/p>\n\n\n\n<p>However, <strong>not all web users are a fan of inertial scrolling<\/strong>. That is why there is an option for Mac users to use or not use scrolling with inertia.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"..\/assets\/imgs\/2021-10-01\/mac-without-inertia-scrolling.gif\" alt=\"Mac without inertia scrolling\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"developer-issues-with-kinetic-scrolling-devices\">Developer Issues With Kinetic Scrolling Devices<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Some plugins use scroll events to trigger actions or produce animations in a webpage (like when using <a href=\"https:\/\/alvarotrigo.com\/blog\/what-is-scroll-hijacking\/\">scroll hijacking<\/a> 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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>While there is still virtually no way to detect a single swipe, components like <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullpage.js<\/a>, for example, provide an acceptable solution to the issue of the double scroll.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/scroll-lock-key\/\">Scroll Lock Key &#8211; What is it and how to use it<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/scroll-down-macbook\/\">How To Scroll Down On Mac<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/scroll-down-chromebook\/\">How to Scroll Down on a Chromebook?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/smooth-scrolling-chrome\/\">Use Smooth Scrolling in Chrome<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/magic-mouse-1vs2\/\">Apple Magic Mouse 2 Vs 1<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What\u2019s a kinetic scrolling device and how does it affect web users and developers.<\/p>\n","protected":false},"author":4,"featured_media":5242,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[17],"class_list":["post-5243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developing","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5243"}],"version-history":[{"count":5,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5243\/revisions"}],"predecessor-version":[{"id":9595,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5243\/revisions\/9595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5242"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}