Stylish and Cool Customized CSS Scrollbars: A Showcase

On this article we will likely be diving into the world of scrollbars. I do know, it doesn’t sound too glamorous, however belief me, a well-designed web page goes hand-in-hand with an identical scrollbar. The old style chrome scrollbar simply doesn’t slot in as a lot.

We will likely be wanting into the nitty gritty particulars of a scrollbar after which take a look at some cool examples.

Parts of a scrollbar

That is extra of a refresher, actually. There are a bunch of posts proper right here on CSS-Tips that go into deep element relating to customized scrollbar styling in CSS.

To model a scroll bar you might want to be aware of the anatomy of a scrollbar. Take a look at this illustration:

The 2 principal parts to remember listed here are:

The observe is the background beneath the bar.The thumb is the half that the consumer clicks and drags round.

We will change the properties of the whole scrollbar utilizing the vendor-prefixed::-webkit-scrollbar selector. We can provide the scroll bar a set width, background colour, rounded corners… a number of issues! If we’re customizing the principle scrollbar of a web page, then we will use ::-webkit-scrollbar immediately on the HTML component:

html::-webkit-scrollbar {
/* Type away! */
}

If we’re customizing a scroll field that’s the results of overflow: scroll, then we will use ::-webkit-scrollbar on that component as a substitute:

.component::-webkit-scrollbar {
/* Type away! */
}

Right here’s a fast instance that types the HTML component’s scrollbar in order that it’s extensive with a crimson background:

What if we solely wish to change the scrollbar’s thumb or observe? You guessed it — we have now particular prefixed pseudo-elements for these two: ::-webkit-scrollbar-thumb and ::-webkit-scrollbar-track, respectively. Right here’s an thought of what’s attainable once we put all of this stuff collectively:

Sufficient brushing up! I wish to present you three levels of customized scrollbar styling, then open up a giant ol’ showcase of examples pulled from throughout the net for inspiration.

Easy and fashionable scrollbars

A customized scrollbar can nonetheless be minimal. I put collectively a bunch of examples that subtly change the looks, whether or not with a slight colour change to the thumb or observe, or some mild styling to the background.

As you’ll be able to see, we don’t need to go nuts relating to scrollbar styling. Typically a refined change is all it takes to reinforce the general consumer expertise with a scrollbar that matches the general theme.

Cool eye-catching scrollbars

However let’s admit it: it’s enjoyable to go a bit overboard and train some creativity. Listed below are some bizarre and distinctive scrollbars that may be “an excessive amount of” in some instances, however they certain are eye-catching.

Another…

How about we take the scrollbar for a spin in a prepare for the thumb and tracks for the, properly, the observe!

Stylish and Cool Customized CSS Scrollbars: A Showcase initially printed on CSS-Tips, which is a part of the DigitalOcean household. It is best to get the publication.