How to Customize the look of your site with custom scrollbars.
CSS-TRICKS, Slack, Figma, cool portfolio sites. These are some examples of websites and web applications that have custom scrollbars.
Let’s face it, default browser scrollbars look ugly, especially in elements with scrollable content within the main page, those ones that don’t get to the edge of the browser (no pun intended).
To add that final pop to your already beautiful-looking site (I’m hoping), we will explore three possible ways that you can achieve a custom scrollbar.
1. Using the -webkit vendor prefix
This is really the only sure no-JS-library way to style the scrollbar. Unfortunately, it targets only Webkit and Blink-based browsers. So, this won’t work on Firefox.
There are seven parts of the scrollbar that you can target using the webkit vendor prefix.
Want to read this story later? Save it in Journal.
(a) ::-webkit-scrollbar
This targets the entire scrollbar and is a good place to set the width of the bar.
(b) ::-webkit-scrollbar-thumb
This targets the draggable scrolling handle.
( c) ::-webkit-scrollbar-track
This targets the entire space on which the thumb can glide over.
(d) ::-webkit-scrollbar-track-piece
This targets the part of the track not covered by the scrollbar-thumb or handle.
(e) ::webkit-scrollbar-button
This targets the buttons with arrow marks pointing up and down on the scrollbar.
I, however, rarely style the buttons in actual projects. I find not doing so more aesthetically pleasing.
(f) ::-webkit-scrollbar-corner
This targets the usually bottom-right corner where the horizontal and vertical scrollbars meet.
(g) ::-webkit-resizer
This targets the draggable handle found at the bottom of some elements (like Textarea) meant for resizing.
The code looks like this:
However, This no longer works in Chrome.
How you go about styling these is only limited by your imagination… and the laws of CSS.
Note: Although in my code samples, the ::-webkit is attached to a class, it doesn’t have to be attached to anything. You can write the code as below and every element with overflowing content will have the scrollbar styled so. This also applies to the other -webkit-scrollbar selectors.
2. Using scrollbar-color and scrollbar-width
As mentioned in the first method, Firefox doesn’t support the ::-webkit-scrollbar… syntax. However, there are moves to come up with a standardized way of styling scrollbars across browsers. Those moves gave birth to scrollbar-color and scrollbar-width which are already supported by Firefox.
scrollbar-color
It sets the colour of both the scrollbar-thumb and the scrollbar-track and can accept four values. They are:
auto: renders the default browser scrollbar.
light: the browser renders light scrollbars.
dark: the browser renders dark scrollbars
<color>: Takes two values. The first targets the scrollbar-thumb and the second target the scrollbar-track. All CSS colour formats are accepted.
scrollbar-width
It sets the width or the thickness of the scrollbar. It can be set to :
auto: renders the default browser scrollbar width,
thin: a thinner-than-default width determined by the user’s browser, and
none: no scrollbar is shown but the element is still scrollable.
Note: scrollbar-width and scrollbar-color are part of CSS Working Group’s Scrollbars Module Level 1 draft and are currently only supported in Firefox. The ideal thing to do is to combine method 1 and 2 from above to cover both Webkit browsers (like Chrome and Safari) and Firefox. See the sample below.
3. Using JavaScript libraries/plugins
If using JavaScript libraries as a solution for things like this is your thing, then there are over a dozen you could check out, some of which are SimpleBar, Overlay Scrollbars, and Perfect Scrollbar.
Conclusion
With these methods, your portfolio site just got closer to that one you've been admiring. If you need inspiration, checkout Codepen.
If you liked this, show how much in a multiple of ten claps and follow me on Twitter.
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
