Custom Scrollbar in CSS With Cross-Browser Support

Custom Scrollbar in CSS With Cross-Browser Support

CSS offers the ability to add custom styles to the scrollbars on your webpage using the -webkit-scrollbar pseudo-element. However, this method only supports browsers such as Chrome. Firefox and Edge, among others, do not support this pseudo element.

Luckily, browsers are starting to support the scrollbar-color and scrollbar-width CSS properties. So, it's a lot easier to create a custom scrollbar that looks great in all browsers!

Styling

To demonstrate what we can do with custom scrollbars, we'll be styling a scrollbar inside of a div element. The end result will look like this.

In our index.html file, we'll create a few elements for demo purposes before we style the scrollbar.

<div  class="container">
<h2  class="scrollbar-title">Scrollbar</h2>
<div  class="scroll">
<p>...</p>
</div>
</div>

The container will allow us to add padding to the right side of the scrollbar, and the .scroll element will, of course, control the styling of the scrollbar.

Inside of our CSS file, we'll add our demo styles.

.container {
max-width: 576px;
margin: 0  auto;
height: 400px;
max-height: 400px;
background: #ffffff90;
border-radius: 10px;
overflow: none;
padding-right: 6px;
}

.scroll {
overflow-y: scroll;
height: calc(100% - 92px);
padding: 20px;
margin-top: 6px;
scrollbar-color: rgb(89, 91, 207) white;
}

.scrollbar-title {
margin: 0;
height: 80px;
display: flex;
align-items: center;
padding-left: 20px;
width: calc(100% + 6px);
background: white;
color: rgb(89, 91, 207);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Most of that is just styling. The only thing that you'll need to have is the padding-left on the container. This allows the scrollbar to be offset from the side of the container, which is not possible by using margin directly on the scrollbar.

Now that we've got our demo styles laid out, we should have something like this.

It looks pretty good! The scrollbar is offset properly, and the content is scrollable.

The only thing left to do is style the scrollbar.

Styling in Chrome

Like I mentioned earlier, Chromium-based browsers are the only browser that support the -webkit-scrollbar pseudo-element. We'll use that to style our scrollbars in Chrome, and we'll use a different method for Firefox and Edge.

Inside our CSS file, we'll add the style rules for the scrollbar.

.scroll::-webkit-scrollbar {
background: white;
width: 8px;
border-radius: 50px;
}

.scroll::-webkit-scrollbar-thumb {
background: rgb(89, 91, 207);
border-radius: 50px;
}

The -webkit-scrollbar pseudo-element styles the background for the scrollbar, while the -webkit-scrollbar-thumb styles the scroll position indicator.

Now, we can take a look at our scrollbar, and it should have some nice styles applied to it!

Cross-Browser Support

While our custom scrollbar is supported by Chrome, it is not in Firefox and Edge. The custom styles are not applied, leaving us with the default styling.

But have no fear! Firefox recently announced support for the scrollbar-color CSS property. With this property, we can customize the color of the scrollbar.

We'll update our .scroll CSS styles to include this.

.scroll {
...
scrollbar-color: rgb(89, 91, 207) white;
}

The scrollbar-color property takes in two values: the indicator color, and the background color.

Now, our scrollbar should be colored correctly in Firefox.

Notice that the border radius is not applied. This is because Firefox and Edge do not support the -webkit-scrollbar pseudo-element.

So until Firefox and other browsers support more advanced custom styling, we need to define a style for Chrome, and a custom set of colors for Firefox and other browsers.

Conclusion

We now have a custom scrollbar that looks great in Chrome and has pretty good cross-browser support as well!

Thanks for reading! If you liked this article, you can check me out on Twitter, or my website!

p.s For those of you wondering, the official reading time for this article is 3 minutes and 2 seconds ⏳.

Written by

Jarod Peachey

Jarod Peachey is a front end developer and JAMstack enthusiast. He's the founder of The Five Minute Developer, and https://staticbox.io. It would make him happy if you followed him on Twitter. And maybe check out his website.