ends up here.<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"Surprise: scrollbars are complicated, especially cross-browser and cross-platform. Sometimes they take up space and sometimes they don’t. Sometimes that is affected by a setting and sometimes it isn’t. Sometimes you can see them and sometimes you can’t unless you’re actually scrolling. Styling them is handled in all sorts of different ways, including some very recent […]<\/p>\n","protected":false},"author":3,"featured_media":278867,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1012],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-styling.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":317266,"url":"https:\/\/css-tricks.com\/position-vertical-scrollbars-on-opposite-side-with-css\/","url_meta":{"origin":295947,"position":0},"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":375019,"url":"https:\/\/css-tricks.com\/classy-and-cool-custom-css-scrollbars-a-showcase\/","url_meta":{"origin":295947,"position":1},"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":203270,"url":"https:\/\/css-tricks.com\/viewport-vs-percentage-units\/","url_meta":{"origin":295947,"position":2},"title":"Viewport vs Percentage Units","date":"June 5, 2015","format":false,"excerpt":"Ire Aderinokun with a reminder that 100vw is sometimes wider than the viewable area (because scrollbars). The same is true for vh units, but it's rare websites have horizontal scrollbars. But the best bit is about sizing images such that no matter the screen size there will be a position\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278812,"url":"https:\/\/css-tricks.com\/the-current-state-of-styling-scrollbars-in-css\/","url_meta":{"origin":295947,"position":3},"title":"The Current State of Styling Scrollbars in CSS (2022 Update)","date":"November 23, 2018","format":false,"excerpt":"Looking at Styling Scrollbars in CSS? Look no further, we've got you covered here. This covers how it's best done right now.","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":333018,"url":"https:\/\/css-tricks.com\/scrollbars-on-hover\/","url_meta":{"origin":295947,"position":4},"title":"Scrollbars on Hover","date":"January 20, 2021","format":false,"excerpt":"First, scrollbars are a usability and accessibility thing. Second, a rule of thumb: if an area scrolls, it should have a visible scrollbar. But the web is a big place and I like tricks, so I'm going to cover the idea of only revealing them on hover. Even macOS itself\u00b9\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/scrollbar-hover.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":360423,"url":"https:\/\/css-tricks.com\/sass-default-parameters\/","url_meta":{"origin":295947,"position":5},"title":"A Practical Tip For Using Sass Default Parameters","date":"January 13, 2022","format":false,"excerpt":"Sass offers functions and mixins that accept parameters. You can use Sass default parameters, that is, parameters that have a value even if you don't provide them when the function or mixin is called. Let's focus on mixins here. Here's the syntax of a mixin: @mixin foo($a, $b, $c) {\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/sass-mixins.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-styling.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/295947"}],"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=295947"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/295947\/revisions"}],"predecessor-version":[{"id":296015,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/295947\/revisions\/296015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/278867"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=295947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=295947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=295947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}