{"id":351987,"date":"2021-09-15T15:39:08","date_gmt":"2021-09-15T22:39:08","guid":{"rendered":"https:\/\/css-tricks.com\/?p=351987"},"modified":"2021-09-15T15:39:10","modified_gmt":"2021-09-15T22:39:10","slug":"2021-scroll-survey-report","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/2021-scroll-survey-report\/","title":{"rendered":"2021 Scroll Survey Report"},"content":{"rendered":"\n<p>Here&#8217;s a common thought and question: how do browsers prioritize what they work on? We get little glimpses of it sometimes. We&#8217;re told to &#8220;star issues&#8221; in bug trackers to signal interest. We&#8217;re told to get involved in GitHub threads for spec issues. We&#8217;re told they do read the blog posts. And, sometimes, we get to see the results of surveys. Chrome ran a survey about scrolling on the web back in April and has <a href=\"https:\/\/storage.googleapis.com\/web-dev-uploads\/file\/vS06HQ1YTsbMKSFTIPl2iogUQP73\/QZopyELSk8T7IpsgOnRU.pdf\" rel=\"noopener\">published the results<\/a> with an accompanying <a href=\"https:\/\/web.dev\/2021-scroll-survey-report\/\" rel=\"noopener\">a blog post<\/a>. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>&#8220;Scrolling&#8221; is a big landscape:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default\"><p>From our research, these difficulties come from the multitude of use cases for scroll. When we talk about scrolling, that might include:<\/p><ul><li><a href=\"https:\/\/elad.medium.com\/css-position-sticky-how-it-really-works-54cd01dc2d46\" rel=\"noopener\">Positioning elements within scrollable areas<\/a><\/li><li><a href=\"https:\/\/blog.logrocket.com\/infinite-scroll-techniques-in-react-adcfd7ff32bd\/\" rel=\"noopener\">Infinite scroll<\/a><\/li><li><a href=\"https:\/\/greensock.com\/scrolltrigger\/\" rel=\"noopener\">Scroll linked animation<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/css-only-carousel\/\">Carousels<\/a><\/li><li><a href=\"https:\/\/blog.alexandergottlieb.com\/overflow-scroll-and-the-right-padding-problem-a-css-only-solution-6d442915b3f4\" rel=\"noopener\">Scrollview padding<\/a><\/li><li><a href=\"https:\/\/www.magictoolbox.com\/magicscroll\/integration\/\" rel=\"noopener\">Cyclical scroll<\/a><\/li><li><a href=\"https:\/\/github.com\/tbranyen\/hyperlist\" rel=\"noopener\">Virtualized scroll<\/a><\/li><\/ul><\/blockquote>\n\n\n\n<p>According to the results, dang near half of developers are dissatisfied with scrolling on the web, so this is a metric Google devs want to change and they will prioritize it.<\/p>\n\n\n\n<p>To add to the list above, I think even <a href=\"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/\">smooth scrolling<\/a> is a little frustrating in how you can&#8217;t control the speed or other behaviors of it. For example, you can&#8217;t say &#8220;smooth scroll an on-page jump-down link, but don&#8217;t smooth scroll a find-on-page jump.&#8221;<\/p>\n\n\n\n<p>And that&#8217;s not to mention scroll <em>snapping<\/em>, which is another whole thing with the occasional <a href=\"https:\/\/twitter.com\/chriscoyier\/status\/1430283685371252743\" rel=\"noopener\">bug<\/a>. Speaking of which, Dave had an idea on the show the other day that was pretty interesting. Now that scroll snapping is largely supported, even on desktop, and feels pretty smooth for the most part, should we start using it more liberally, like on whole page sections? Maybe even like&#8230;<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Reset stylesheet *\/\nmain, section, article, footer {\n  scroll-snap-align: start;\n}<\/code><\/pre>\n\n\n\n<p>I&#8217;ve certainly seen scroll snapping in more places. Like this example from Scott Jehl where he was playing with scroll snapping on fixed table headers and columns. It&#8217;s a very nice touch:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abJrPOP\" src=\"\/\/codepen.io\/anon\/embed\/abJrPOP?height=450&amp;theme-id=1&amp;slug-hash=abJrPOP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abJrPOP\" title=\"CodePen Embed abJrPOP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a common thought and question: how do browsers prioritize what they work on? We get little glimpses of it [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":352053,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"According to the results, dang near half of developers are dissatisfied with scrolling on the web.","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[1460,754],"class_list":["post-351987","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-scroll-snap","tag-scrolling"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-14-at-3.50.18-PM.png?fit=1600%2C800&ssl=1","jetpack-related-posts":[{"id":288479,"url":"https:\/\/css-tricks.com\/prevent-page-scrolling-when-a-modal-is-open\/","url_meta":{"origin":351987,"position":0},"title":"Prevent Page Scrolling When a Modal is Open","author":"Brad Wu","date":"June 3, 2019","format":false,"excerpt":"Dec. 3, 2025: A minor tweak in Chrome 144 makes it possible to prevent page scrolling by declaring overscroll-behavior\u00a0on both the dialog element and the backdrop and set it to the\u00a0contain value. More information is available in this article. Please stop me if you've heard this one before. You open\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-gutter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-gutter.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-gutter.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-gutter.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-gutter.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":274810,"url":"https:\/\/css-tricks.com\/practical-css-scroll-snapping\/","url_meta":{"origin":351987,"position":1},"title":"Practical CSS Scroll Snapping","author":"Max Kohler","date":"August 15, 2018","format":false,"excerpt":"CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It\u2019s great for building interactions like this one: Live Demo Browser support and basic usage Browser support for CSS scroll snapping has improved significantly since it was introduced in 2016,\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/scroll-snap-featured.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/scroll-snap-featured.gif?fit=800%2C400&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/scroll-snap-featured.gif?fit=800%2C400&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/scroll-snap-featured.gif?fit=800%2C400&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":332473,"url":"https:\/\/css-tricks.com\/fixing-smooth-scrolling-with-find-on-page\/","url_meta":{"origin":351987,"position":2},"title":"Fixing Smooth Scrolling with Find-on-Page","author":"Chris Coyier","date":"January 12, 2021","format":false,"excerpt":"Back when we released the v17 design (we're on v18 now) of this site. I added html { scroll-behavior: smooth; } to the CSS. Right away, I got comments like this (just one example): ... when you control+f or command+f and search on CSS-Tricks, it\u2019ll scroll very slowly instead of\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":330827,"url":"https:\/\/css-tricks.com\/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects\/","url_meta":{"origin":351987,"position":3},"title":"How to Use the Locomotive Scroll for all Kinds of Scrolling Effects","author":"King Nelson","date":"December 16, 2020","format":false,"excerpt":"I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive Scroll library. It lets you perform a variety of scrolling effects, like parallax and triggering\/controlling animations at scroll points. You might also call it a \u201csmooth scrolling\u201d library, but it\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":384634,"url":"https:\/\/css-tricks.com\/scroll-driven-animations-notebook\/","url_meta":{"origin":351987,"position":4},"title":"Scroll Driven Animations Notebook","author":"Geoff Graham","date":"February 13, 2025","format":false,"excerpt":"Adam's such a mad scientist with CSS. He's been putting together a series of \"notebooks\" that make it easy for him to demo code. He's got one for gradient text, one for a comparison slider, another for accordions, and the list goes on. One of his latest is a notebook\u2026","rel":"","context":"In &quot;Links&quot;","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/02\/adam-argyle-nerdy-notebook.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/02\/adam-argyle-nerdy-notebook.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/02\/adam-argyle-nerdy-notebook.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/02\/adam-argyle-nerdy-notebook.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/02\/adam-argyle-nerdy-notebook.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":337295,"url":"https:\/\/css-tricks.com\/creating-a-smart-navbar-with-vanilla-javascript\/","url_meta":{"origin":351987,"position":5},"title":"Creating a Smart Navbar With Vanilla JavaScript","author":"Jemima Abu","date":"April 5, 2021","format":false,"excerpt":"Sticky, or fixed, navigation is a popular design choice because it gives users persistent access to navigate the site. On the other hand, it takes up space on the page and sometimes covers content is a way that\u2019s less than appealing. A possible solution? Smart navigation. Let\u2019s define \u201csmart navigation\u201d\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/smart-nav.gif?fit=1000%2C500&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/smart-nav.gif?fit=1000%2C500&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/smart-nav.gif?fit=1000%2C500&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/smart-nav.gif?fit=1000%2C500&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=351987"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351987\/revisions"}],"predecessor-version":[{"id":352055,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351987\/revisions\/352055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/352053"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=351987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=351987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=351987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}