{"id":375019,"date":"2022-11-14T05:54:26","date_gmt":"2022-11-14T13:54:26","guid":{"rendered":"https:\/\/css-tricks.com\/?p=375019"},"modified":"2022-11-14T05:54:27","modified_gmt":"2022-11-14T13:54:27","slug":"classy-and-cool-custom-css-scrollbars-a-showcase","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/classy-and-cool-custom-css-scrollbars-a-showcase\/","title":{"rendered":"Classy and Cool Custom CSS Scrollbars: A Showcase"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<p>We will be looking into the nitty gritty details of a scrollbar and then look at some cool examples.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"components-of-a-scrollbar\">Components of a scrollbar<\/h3>\n\n\n<p>This is more of a refresher, really. There are a <a href=\"https:\/\/css-tricks.com\/?s=scrollbar&amp;post_tag=scrollbars\">bunch of posts right here on CSS-Tricks<\/a> that go into deep detail when it comes to custom scrollbar styling in CSS.<\/p>\n\n\n\n<p>To style a scroll bar you need to be familiar with the anatomy of a scrollbar. Have a look at this illustration:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1240\" height=\"739\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_65E500220BB2D49193BFEF1BE69DDCD600119D47A1BF1C47C11A2DEE3AED07CC_1665763818295_ScrollbarThumb.png?resize=1240%2C739&#038;ssl=1\" alt=\"A webpage wireframe with a scrollbar highlighting the scrollbar thumb and scrollbar track.\" class=\"wp-image-375020\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_65E500220BB2D49193BFEF1BE69DDCD600119D47A1BF1C47C11A2DEE3AED07CC_1665763818295_ScrollbarThumb.png?w=1240&amp;ssl=1 1240w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_65E500220BB2D49193BFEF1BE69DDCD600119D47A1BF1C47C11A2DEE3AED07CC_1665763818295_ScrollbarThumb.png?resize=300%2C179&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_65E500220BB2D49193BFEF1BE69DDCD600119D47A1BF1C47C11A2DEE3AED07CC_1665763818295_ScrollbarThumb.png?resize=1024%2C610&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_65E500220BB2D49193BFEF1BE69DDCD600119D47A1BF1C47C11A2DEE3AED07CC_1665763818295_ScrollbarThumb.png?resize=768%2C458&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The two main components to keep in mind here are:<\/p>\n\n\n\n<ol><li>The <strong>track<\/strong> is the background beneath the bar.<\/li><li>The <strong>thumb<\/strong> is the part that the user clicks and drags around.<\/li><\/ol>\n\n\n\n<p>We can change the properties of the complete scrollbar using the vendor-prefixed<code>::-webkit-scrollbar<\/code> selector. We can give the scroll bar a fixed width, background color, rounded corners\u2026 lots of things! If we\u2019re customizing the main scrollbar of a page, then we can use <code>::-webkit-scrollbar<\/code> directly on the HTML element:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html::-webkit-scrollbar {\n  \/* Style away! *\/\n}<\/code><\/pre>\n\n\n\n<p>If we\u2019re customizing a scroll box that\u2019s the result of <code>overflow: scroll<\/code>, then we can use <code>::-webkit-scrollbar<\/code> on that element instead:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element::-webkit-scrollbar {\n  \/* Style away! *\/\n}<\/code><\/pre>\n\n\n\n<p>Here\u2019s a quick example that styles the HTML element\u2019s scrollbar so that it is wide with a red background:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZERbYVa\" src=\"\/\/codepen.io\/anon\/embed\/ZERbYVa?height=450&amp;theme-id=1&amp;slug-hash=ZERbYVa&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZERbYVa\" title=\"CodePen Embed ZERbYVa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>What if we only want to change the scrollbar\u2019s thumb or track? You guessed it \u2014 we have special prefixed pseudo-elements for those two: <code>::-webkit-scrollbar-thumb<\/code> and <code>::-webkit-scrollbar-track<\/code>, respectively. Here\u2019s an idea of what\u2019s possible when we put all of these things together:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjZYoVe\" src=\"\/\/codepen.io\/anon\/embed\/JjZYoVe?height=450&amp;theme-id=1&amp;slug-hash=JjZYoVe&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjZYoVe\" title=\"CodePen Embed JjZYoVe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Enough brushing up! I want to show you three degrees of custom scrollbar styling, then open up a big ol\u2019 showcase of examples pulled from across the web for inspiration.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"simple-and-classy-scrollbars\">Simple and classy scrollbars<\/h3>\n\n\n<p>A custom scrollbar can still be minimal. I put together a group of examples that subtly change the appearance, whether with a slight color change to the thumb or track, or some light styling to the background.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBKOdLd\" src=\"\/\/codepen.io\/anon\/embed\/qBKOdLd?height=450&amp;theme-id=1&amp;slug-hash=qBKOdLd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBKOdLd\" title=\"CodePen Embed qBKOdLd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>As you can see, we don\u2019t have to go nuts when it comes to scrollbar styling. Sometimes a subtle change is all it takes to enhance the overall user experience with a scrollbar that matches the overall theme.<\/p>\n\n\n\n<div class=\"wp-block-jetpack-slideshow aligncenter\" data-effect=\"slide\"><div class=\"wp-block-jetpack-slideshow_container swiper-container\"><ul class=\"wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper\"><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1287\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375022\" data-id=\"375022\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/1sm4z4MY.png?resize=1600%2C1287&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/1sm4z4MY.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/1sm4z4MY.png?resize=300%2C241&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/1sm4z4MY.png?resize=1024%2C824&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/1sm4z4MY.png?resize=768%2C618&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/1sm4z4MY.png?resize=1536%2C1236&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/www.swyx.io\" rel=\"noopener\">Shawn Wang<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"974\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375023\" data-id=\"375023\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/3fQGuado.png?resize=1600%2C974&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/3fQGuado.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/3fQGuado.png?resize=300%2C183&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/3fQGuado.png?resize=1024%2C623&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/3fQGuado.png?resize=768%2C468&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/3fQGuado.png?resize=1536%2C935&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/TimPietrusky\/pen\/AYPRej\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1390\" height=\"796\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375024\" data-id=\"375024\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4hJnp-fs.png?resize=1390%2C796&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4hJnp-fs.png?w=1390&amp;ssl=1 1390w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4hJnp-fs.png?resize=300%2C172&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4hJnp-fs.png?resize=1024%2C586&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4hJnp-fs.png?resize=768%2C440&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/DarthVeyda\/pen\/eLLbXa\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"714\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375025\" data-id=\"375025\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4ypk9yNZ.png?resize=1600%2C714&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4ypk9yNZ.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4ypk9yNZ.png?resize=300%2C134&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4ypk9yNZ.png?resize=1024%2C457&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4ypk9yNZ.png?resize=768%2C343&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4ypk9yNZ.png?resize=1536%2C685&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/www.kwokyinmak.com\/\" rel=\"noopener\">Kwok Yin Mak<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"909\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375026\" data-id=\"375026\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/8SSCDbKg.png?resize=1600%2C909&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/8SSCDbKg.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/8SSCDbKg.png?resize=300%2C170&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/8SSCDbKg.png?resize=1024%2C582&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/8SSCDbKg.png?resize=768%2C436&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/8SSCDbKg.png?resize=1536%2C873&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/johnjullies\/pen\/VyGWNV\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"705\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375027\" data-id=\"375027\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9trXJ_hh.png?resize=1600%2C705&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9trXJ_hh.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9trXJ_hh.png?resize=300%2C132&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9trXJ_hh.png?resize=1024%2C451&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9trXJ_hh.png?resize=768%2C338&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9trXJ_hh.png?resize=1536%2C677&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/www.thisisarc.com\/\" rel=\"noopener\">Arc<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1688\" height=\"766\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375028\" data-id=\"375028\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9XNM4nXA.png?resize=1688%2C766&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9XNM4nXA.png?w=1688&amp;ssl=1 1688w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9XNM4nXA.png?resize=300%2C136&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9XNM4nXA.png?resize=1024%2C465&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9XNM4nXA.png?resize=768%2C349&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/9XNM4nXA.png?resize=1536%2C697&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/shadeed\/pen\/QWpRojb\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1016\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375029\" data-id=\"375029\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/BiVJ2Iqs.png?resize=1600%2C1016&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/BiVJ2Iqs.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/BiVJ2Iqs.png?resize=300%2C191&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/BiVJ2Iqs.png?resize=1024%2C650&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/BiVJ2Iqs.png?resize=768%2C488&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/BiVJ2Iqs.png?resize=1536%2C975&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/mbillah-cse\/pen\/QMjgML\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1231\" height=\"651\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375031\" data-id=\"375031\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/HuEDAWZQ.jpeg?resize=1231%2C651&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/HuEDAWZQ.jpeg?w=1231&amp;ssl=1 1231w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/HuEDAWZQ.jpeg?resize=300%2C159&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/HuEDAWZQ.jpeg?resize=1024%2C542&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/HuEDAWZQ.jpeg?resize=768%2C406&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/angelos_website\/pen\/PPzgzM\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1692\" height=\"1046\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375032\" data-id=\"375032\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/lZ6PRtyk.png?resize=1692%2C1046&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/lZ6PRtyk.png?w=1692&amp;ssl=1 1692w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/lZ6PRtyk.png?resize=300%2C185&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/lZ6PRtyk.png?resize=1024%2C633&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/lZ6PRtyk.png?resize=768%2C475&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/lZ6PRtyk.png?resize=1536%2C950&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/cassiecodes\/pen\/YWZGWe\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"826\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375033\" data-id=\"375033\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/n_cp8evo.png?resize=1600%2C826&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/n_cp8evo.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/n_cp8evo.png?resize=300%2C155&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/n_cp8evo.png?resize=1024%2C529&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/n_cp8evo.png?resize=768%2C396&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/n_cp8evo.png?resize=1536%2C793&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/iamsandy\/pen\/GEwVrN\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"724\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375034\" data-id=\"375034\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/V6RqL0vE.png?resize=1600%2C724&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/V6RqL0vE.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/V6RqL0vE.png?resize=300%2C136&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/V6RqL0vE.png?resize=1024%2C463&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/V6RqL0vE.png?resize=768%2C348&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/V6RqL0vE.png?resize=1536%2C695&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/Ridoshi\/pen\/araEGY\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1532\" height=\"1026\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375035\" data-id=\"375035\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Wh1bP0fw.png?resize=1532%2C1026&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Wh1bP0fw.png?w=1532&amp;ssl=1 1532w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Wh1bP0fw.png?resize=300%2C201&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Wh1bP0fw.png?resize=1024%2C686&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Wh1bP0fw.png?resize=768%2C514&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/julien-marcou\/pen\/xxZRYKE\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><\/ul><a class=\"wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white\" role=\"button\"><\/a><a class=\"wp-block-jetpack-slideshow_button-next swiper-button-next swiper-button-white\" role=\"button\"><\/a><a aria-label=\"Pause Slideshow\" class=\"wp-block-jetpack-slideshow_button-pause\" role=\"button\"><\/a><div class=\"wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white\"><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"cool-eyecatching-scrollbars\">Cool eye-catching scrollbars<\/h3>\n\n\n<p>But let\u2019s admit it: it\u2019s fun to go a little overboard and exercise some creativity. Here are some weird and unique scrollbars that might be \u201ctoo much\u201d in some cases, but they sure are eye-catching.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYKpWPb\" src=\"\/\/codepen.io\/anon\/embed\/eYKpWPb?height=450&amp;theme-id=1&amp;slug-hash=eYKpWPb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYKpWPb\" title=\"CodePen Embed eYKpWPb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-jetpack-slideshow aligncenter\" data-effect=\"slide\"><div class=\"wp-block-jetpack-slideshow_container swiper-container\"><ul class=\"wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper\"><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1039\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375047\" data-id=\"375047\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/S5r8u6Mo.png?resize=1600%2C1039&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/S5r8u6Mo.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/S5r8u6Mo.png?resize=300%2C195&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/S5r8u6Mo.png?resize=1024%2C665&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/S5r8u6Mo.png?resize=768%2C499&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/S5r8u6Mo.png?resize=1536%2C997&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/karan-kmr\/pen\/vYmwRwZ\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"808\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375050\" data-id=\"375050\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/zm7KmgWM.png?resize=1600%2C808&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/zm7KmgWM.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/zm7KmgWM.png?resize=300%2C152&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/zm7KmgWM.png?resize=1024%2C517&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/zm7KmgWM.png?resize=768%2C388&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/zm7KmgWM.png?resize=1536%2C776&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/codepenforkapil\/pen\/gxEaYY\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"714\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375037\" data-id=\"375037\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4p4jKXBr.png?resize=1600%2C714&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4p4jKXBr.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4p4jKXBr.png?resize=300%2C134&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4p4jKXBr.png?resize=1024%2C457&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4p4jKXBr.png?resize=768%2C343&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/4p4jKXBr.png?resize=1536%2C685&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/www.stevenmengin.com\/\" rel=\"noopener\">Steven Mengin<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1165\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375038\" data-id=\"375038\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/bSw35JQU.png?resize=1600%2C1165&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/bSw35JQU.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/bSw35JQU.png?resize=300%2C218&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/bSw35JQU.png?resize=1024%2C746&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/bSw35JQU.png?resize=768%2C559&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/bSw35JQU.png?resize=1536%2C1118&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/nikki-peel\/pen\/ZEpwRYW\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1846\" height=\"1052\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375039\" data-id=\"375039\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/CmJSsKuI.png?resize=1846%2C1052&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/CmJSsKuI.png?w=1846&amp;ssl=1 1846w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/CmJSsKuI.png?resize=300%2C171&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/CmJSsKuI.png?resize=1024%2C584&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/CmJSsKuI.png?resize=768%2C438&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/CmJSsKuI.png?resize=1536%2C875&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/sanketbodke\/pen\/dyRagjm\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1806\" height=\"952\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375040\" data-id=\"375040\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/FcTrHs68.png?resize=1806%2C952&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/FcTrHs68.png?w=1806&amp;ssl=1 1806w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/FcTrHs68.png?resize=300%2C158&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/FcTrHs68.png?resize=1024%2C540&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/FcTrHs68.png?resize=768%2C405&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/FcTrHs68.png?resize=1536%2C810&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/j2rojasr\/pen\/JXEdMp\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"976\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375041\" data-id=\"375041\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/G4xZSOEc.png?resize=1600%2C976&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/G4xZSOEc.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/G4xZSOEc.png?resize=300%2C183&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/G4xZSOEc.png?resize=1024%2C625&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/G4xZSOEc.png?resize=768%2C468&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/G4xZSOEc.png?resize=1536%2C937&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/mbillah-cse\/pen\/QMjgML\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"917\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375042\" data-id=\"375042\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Hx2svuSI.png?resize=1600%2C917&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Hx2svuSI.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Hx2svuSI.png?resize=300%2C172&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Hx2svuSI.png?resize=1024%2C587&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Hx2svuSI.png?resize=768%2C440&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Hx2svuSI.png?resize=1536%2C880&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/dusanlukic\/pen\/VwzjbPL\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"692\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375043\" data-id=\"375043\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/If_Kly8c.png?resize=1600%2C692&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/If_Kly8c.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/If_Kly8c.png?resize=300%2C130&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/If_Kly8c.png?resize=1024%2C443&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/If_Kly8c.png?resize=768%2C332&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/If_Kly8c.png?resize=1536%2C664&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/CarliBotes\/pen\/xewRZY\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1530\" height=\"892\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375044\" data-id=\"375044\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/iWi9CuVw.png?resize=1530%2C892&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/iWi9CuVw.png?w=1530&amp;ssl=1 1530w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/iWi9CuVw.png?resize=300%2C175&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/iWi9CuVw.png?resize=1024%2C597&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/iWi9CuVw.png?resize=768%2C448&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/brandonhimpfen\/pen\/ezBgOq\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"771\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375045\" data-id=\"375045\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/kgP_S9HI.png?resize=1600%2C771&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/kgP_S9HI.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/kgP_S9HI.png?resize=300%2C145&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/kgP_S9HI.png?resize=1024%2C493&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/kgP_S9HI.png?resize=768%2C370&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/kgP_S9HI.png?resize=1536%2C740&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/arron21\/pen\/BgNprp\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1814\" height=\"910\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375046\" data-id=\"375046\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/LuiLu9Ww.png?resize=1814%2C910&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/LuiLu9Ww.png?w=1814&amp;ssl=1 1814w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/LuiLu9Ww.png?resize=300%2C150&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/LuiLu9Ww.png?resize=1024%2C514&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/LuiLu9Ww.png?resize=768%2C385&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/LuiLu9Ww.png?resize=1536%2C771&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/khushwantk\/pen\/PomByxo\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"804\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375048\" data-id=\"375048\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tHjgHIzY.png?resize=1600%2C804&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tHjgHIzY.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tHjgHIzY.png?resize=300%2C151&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tHjgHIzY.png?resize=1024%2C515&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tHjgHIzY.png?resize=768%2C386&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/tHjgHIzY.png?resize=1536%2C772&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/mgweb2020\/pen\/MWeyQaw\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1754\" height=\"812\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-375049\" data-id=\"375049\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/XnN25wBk.png?resize=1754%2C812&#038;ssl=1\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/XnN25wBk.png?w=1754&amp;ssl=1 1754w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/XnN25wBk.png?resize=300%2C139&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/XnN25wBk.png?resize=1024%2C474&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/XnN25wBk.png?resize=768%2C356&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/XnN25wBk.png?resize=1536%2C711&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\"><a href=\"https:\/\/codepen.io\/lsgrrd\/pen\/DLQvpw\" rel=\"noopener\">Open in CodePen<\/a><\/figcaption><\/figure><\/li><\/ul><a class=\"wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white\" role=\"button\"><\/a><a class=\"wp-block-jetpack-slideshow_button-next swiper-button-next swiper-button-white\" role=\"button\"><\/a><a aria-label=\"Pause Slideshow\" class=\"wp-block-jetpack-slideshow_button-pause\" role=\"button\"><\/a><div class=\"wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white\"><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"one-more\">One more\u2026<\/h3>\n\n\n<p>How about we take the scrollbar for a spin in a train for the thumb and tracks for the, well, the track!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Yzvyrvw\" src=\"\/\/codepen.io\/anon\/embed\/Yzvyrvw?height=450&amp;theme-id=1&amp;slug-hash=Yzvyrvw&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Yzvyrvw\" title=\"CodePen Embed Yzvyrvw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 of a scrollbar and then [&hellip;]<\/p>\n","protected":false},"author":288700,"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":"A nice big ol\u2019 roundup of custom scrollbars from @SyntaxE85827144.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"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":333018,"url":"https:\/\/css-tricks.com\/scrollbars-on-hover\/","url_meta":{"origin":375019,"position":0},"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 &quot;Article&quot;","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":358956,"url":"https:\/\/css-tricks.com\/strut-your-stuff-with-a-custom-scrollbar\/","url_meta":{"origin":375019,"position":1},"title":"Strut Your Stuff With a Custom Scrollbar","date":"December 24, 2021","format":false,"excerpt":"The first time I had my breath taken away by a humble scrollbar was on this very site. When CSS-Tricks v17 rolled out with its FAT CHONKY BOI, my jaw dropped. I didn\u2019t know you could do that on a professional site. And it would look\u2026 good?! I appreciated so\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","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":278812,"url":"https:\/\/css-tricks.com\/the-current-state-of-styling-scrollbars-in-css\/","url_meta":{"origin":375019,"position":2},"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 &quot;Article&quot;","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":306427,"url":"https:\/\/css-tricks.com\/css-scrollbar-with-progress-meter\/","url_meta":{"origin":375019,"position":3},"title":"CSS Scrollbar With Progress Meter","date":"April 15, 2020","format":false,"excerpt":"Scrollbars are natural progress meters. How far the scrollbar is down or across is how much progress has been made scrolling through that element (often the entire page). But, they are more like progress indicators than meters, if you think of a meter as something that \"fills up\" as you\u2026","rel":"","context":"In &quot;Article&quot;","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":350486,"url":"https:\/\/css-tricks.com\/scrollbar-reflowing\/","url_meta":{"origin":375019,"position":4},"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 &quot;Article&quot;","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":360423,"url":"https:\/\/css-tricks.com\/sass-default-parameters\/","url_meta":{"origin":375019,"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 &quot;Article&quot;","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\/375019"}],"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\/288700"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=375019"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/375019\/revisions"}],"predecessor-version":[{"id":375061,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/375019\/revisions\/375061"}],"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=375019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=375019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=375019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}