Customize website’s scrollbar with CSS
Three lines of CSS code can make your website’s scrollbar looks like Mac OS’s one
Although scrollbar has just small area on the web browser, to me — as interface designer — it’s not that tiny, nor okay to ignore. If you’re true nerd that care about every details, this short tutorial would be helpful for you.
Customizing web browser’s scrollbar is non standard method to styling, so you need to use -webkit- vendor prefix to use pseudo-elements above. Only Webkit browsers(e.g., Chrome, Safari) support this properties. Other browsers like Firefox or IE don’t support this method.
You can use 7 different pseudo-elements to customize web browser’s scrollbar. See the code snippet below:
I used ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb for this tutorial. Each properties need value inside the brackets.
From my stylesheet
If you’re using GitHub Gist code snippets on your own website, It’s available to customize it’s scrollbar either like image below. We can apply this method anywhere if we know the classname or ID of the elements, which we’re going to customize them.
Gist’s code snippet uses classname .blob-wrapper for it’s scrollbar, so we can customize it with that. Copy and paste the CSS code above will make your Gist code snippet’s scrollbar just like the image above.
Can I use?
At this point in my writing this article today(January 5, 2018), search result on caniuse.com says 87.07% of browsers support for ::-webkit-scrollbar pseudo-elements. You can check the latest report on caniuse.com.
Again, this method only works on Webkit browsers with vendor prefix, *NOT* working on the other browsers. Thank you for reading my article, hope you enjoyed.
Title : Customize website’s scrollbar with CSS
Date : January 5, 2018
Writer : Hyouk Seo (Spemer)