{"id":269950,"date":"2018-04-19T06:57:22","date_gmt":"2018-04-19T13:57:22","guid":{"rendered":"http:\/\/css-tricks.com\/?p=269950"},"modified":"2018-08-07T14:05:15","modified_gmt":"2018-08-07T21:05:15","slug":"scroll-to-the-future","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/scroll-to-the-future\/","title":{"rendered":"Scroll to the Future"},"content":{"rendered":"

This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn\u2019t know about, like Element.scrollIntoView()<\/code><\/a> and the scroll-behavior<\/code><\/a> CSS property.<\/p>\n

My favorite part of all though? It has to be this bit:<\/p>\n

\n

In the modern web, relying heavily on custom JavaScript to achieve identical behavior for all clients is no longer justified: the whole idea of \u201ccross-browser compatibility\u201d is becoming a thing of the past with more CSS properties and DOM API methods making their way into standard browser implementations.<\/p>\n

In our opinion, Progressive Enhancement is the best approach to follow when implementing non-trivial scrolling in your web projects.<\/p>\n

Make sure you can provide the best possible minimal, but universally supported UX, and then improve with modern browser features in mind.<\/p>\n<\/blockquote>\n

Speaking of the cross-browser behavior of scrollbars, Louis Hoebregts also has a new post<\/a> that notes how browsers do not include the scrollbar when dealing with vw<\/code> units and he provides a nice way of handling it with CSS custom properties.<\/p>\n","protected":false},"excerpt":{"rendered":"

This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn\u2019t know about, like Element.scrollIntoView() and the scroll-behavior CSS property. My favorite part of all though? It has to be this bit: In the […]<\/p>\n","protected":false},"author":223806,"featured_media":269979,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Scroll to the Future","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1224,1460,1012],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/scrollbar.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":2833,"url":"https:\/\/css-tricks.com\/the-css-overflow-property\/","url_meta":{"origin":269950,"position":0},"title":"The CSS Overflow Property","date":"May 27, 2009","format":false,"excerpt":"Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/overflow-visible.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":283203,"url":"https:\/\/css-tricks.com\/downsides-of-smooth-scrolling\/","url_meta":{"origin":269950,"position":1},"title":"Downsides of Smooth Scrolling","date":"March 11, 2019","format":false,"excerpt":"Smooth scrolling has gotten a lot easier. If you want it all the time on your page, and you are happy letting the browser deal with the duration for you, it's a single line of CSS: html { scroll-behavior: smooth; } I tried this on version 17 of this site,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/smooth-scroll-nav.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317266,"url":"https:\/\/css-tricks.com\/position-vertical-scrollbars-on-opposite-side-with-css\/","url_meta":{"origin":269950,"position":2},"title":"Position Vertical Scrollbars on Opposite Side with CSS","date":"July 22, 2020","format":false,"excerpt":"Fair warning: I can't say I recommend this in general because it breaks a very strong expectation of where scrollbars are, which are useful for a lots of folks, not to mention, a core accessibility feature for many. But it is a fascinating CSS trick and the web is a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/scrollbar-progress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":318581,"url":"https:\/\/css-tricks.com\/thats-just-how-i-scroll\/","url_meta":{"origin":269950,"position":3},"title":"That’s Just How I Scroll","date":"August 14, 2020","format":false,"excerpt":"How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that's a pretty good indication. You might still have to scrapple with your client about \"the fold\" or whatever, but I don't think anyone is confused at what a scrollbar is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/scroll-indicators.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375019,"url":"https:\/\/css-tricks.com\/classy-and-cool-custom-css-scrollbars-a-showcase\/","url_meta":{"origin":269950,"position":4},"title":"Classy and Cool Custom CSS Scrollbars: A Showcase","date":"November 14, 2022","format":false,"excerpt":"In this article we will be diving into the world of scrollbars. I know, it doesn\u2019t sound too glamorous, but trust me, a well-designed page goes hand-in-hand with a matching scrollbar. The old-fashioned chrome scrollbar just doesn\u2019t fit in as much. We will be looking into the nitty gritty details\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-styling.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350486,"url":"https:\/\/css-tricks.com\/scrollbar-reflowing\/","url_meta":{"origin":269950,"position":5},"title":"Scrollbar Reflowing","date":"August 24, 2021","format":false,"excerpt":"This is a bit of advice for developers on Macs I've heard quite a few times, and I'll echo it: go into System Preferences > General > Show scroll bars and set to always. This isn't about you, it's about the web. See, the problem is that without this setting\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/scrollbar-progress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269950"}],"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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=269950"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269950\/revisions"}],"predecessor-version":[{"id":270060,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269950\/revisions\/270060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/269979"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=269950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=269950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=269950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}