Classy and Cool Custom CSS Scrollbars: A Showcase | CSS-Tricks - CSS-Tricks

In this article we will be diving into the world of scrollbars. I know, it doesn’t 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’t fit in as much.

We will be looking into the nitty gritty details of a scrollbar and then look at some cool examples.

This is more of a refresher, really. There are a bunch of posts right here on CSS-Tricks that go into deep detail when it comes to custom scrollbar styling in CSS.

To style a scroll bar you need to be familiar with the anatomy of a scrollbar. Have a look at this illustration:

The two main components to keep in mind here are:

We can change the properties of the complete scrollbar using the vendor-prefixed::-webkit-scrollbar selector. We can give the scroll bar a fixed width, background color, rounded corners… lots of things! If we’re customizing the main scrollbar of a page, then we can use ::-webkit-scrollbar directly on the HTML element:

If we’re customizing a scroll box that’s the result of overflow: scroll, then we can use ::-webkit-scrollbar on that element instead:

Here’s a quick example that styles the HTML element’s scrollbar so that it is wide with a red background:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu posuere eros. Aliquam finibus ipsum vel massa molestie semper. Praesent cursus finibus est eu feugiat. Vestibulum aliquam faucibus malesuada. Mauris rhoncus odio id blandit porta. Maecenas ut bibendum augue. Nam pretium fermentum mattis. Aenean nec magna id sapien gravida suscipit. Aliquam molestie hendrerit nulla, sit amet tempor arcu rutrum in. Cras varius turpis id rhoncus vehicula. Sed interdum, orci egestas mollis maximus, dui nunc dapibus lorem, ac aliquet risus magna in purus. Duis porta ornare nibh, quis euismod ligula auctor et. Quisque sed bibendum sapien, quis pellentesque nisl. Maecenas rutrum dui ultricies lorem pretium, sed ullamcorper ex condimentum. Nunc suscipit nunc eget ligula tincidunt, sit amet cursus nisi vehicula. Nulla sit amet massa vehicula, porttitor nunc in, vulputate tellus. Aliquam condimentum finibus hendrerit. Fusce molestie ex quis porttitor luctus. Aenean ut lobortis eros. Duis porta efficitur magna sed accumsan. Sed sed blandit mi. Nulla vitae sollicitudin ex. Vivamus finibus, orci at feugiat varius, magna urna tristique purus, tristique hendrerit sem turpis sed elit. In fringilla quam vitae imperdiet dictum.

What if we only want to change the scrollbar’s thumb or track? You guessed it — we have special prefixed pseudo-elements for those two: ::-webkit-scrollbar-thumb and ::-webkit-scrollbar-track, respectively. Here’s an idea of what’s possible when we put all of these things together:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu posuere eros. Aliquam finibus ipsum vel massa molestie semper. Praesent cursus finibus est eu feugiat. Vestibulum aliquam faucibus malesuada. Mauris rhoncus odio id blandit porta. Maecenas ut bibendum augue. Nam pretium fermentum mattis. Aenean nec magna id sapien gravida suscipit. Aliquam molestie hendrerit nulla, sit amet tempor arcu rutrum in. Cras varius turpis id rhoncus vehicula. Sed interdum, orci egestas mollis maximus, dui nunc dapibus lorem, ac aliquet risus magna in purus. Duis porta ornare nibh, quis euismod ligula auctor et. Quisque sed bibendum sapien, quis pellentesque nisl. Maecenas rutrum dui ultricies lorem pretium, sed ullamcorper ex condimentum. Nunc suscipit nunc eget ligula tincidunt, sit amet cursus nisi vehicula. Nulla sit amet massa vehicula, porttitor nunc in, vulputate tellus. Aliquam condimentum finibus hendrerit. Fusce molestie ex quis porttitor luctus. Aenean ut lobortis eros. Duis porta efficitur magna sed accumsan. Sed sed blandit mi. Nulla vitae sollicitudin ex. Vivamus finibus, orci at feugiat varius, magna urna tristique purus, tristique hendrerit sem turpis sed elit. In fringilla quam vitae imperdiet dictum.

Enough brushing up! I want to show you three degrees of custom scrollbar styling, then open up a big ol’ showcase of examples pulled from across the web for inspiration.

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.

As you can see, we don’t 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.

But let’s admit it: it’s fun to go a little overboard and exercise some creativity. Here are some weird and unique scrollbars that might be “too much” in some cases, but they sure are eye-catching.

How about we take the scrollbar for a spin in a train for the thumb and tracks for the, well, the track!

Classy and Cool Custom CSS Scrollbars: A Showcase | CSS-Tricks - CSS-Tricks

Components of a scrollbar

Simple and classy scrollbars

Cool eye-catching scrollbars

One more…