CSS Custom Scrollbar
Custom scrollbars are becoming increasingly common, and I’m eager to learn more about them. There are several reasons why a scrollbar should be customized. For example, the default scrollbar can make an app’s UI look inconsistent across many operating systems, and in this case, having a single style can be beneficial.
I’ve always wanted to learn how to customize a scrollbar in CSS but haven’t had the opportunity. In this essay, I’ll take advantage of the opportunity to learn about them and document my experience.
Introduction
Get Sheikh Mohammad Rifat’s stories in your inbox
Join Medium for free to get updates from this writer.
The first thing I’d like to go over is the components or pieces of a scrollbar. The track and the thumb are contained within a scrollbar. Here’s a diagram that illustrates them:
The track is the scrollbar’s foundation, and the thumb is what the user drags to scroll within a page or section.One thing to bear in mind is that, depending on the design, a scrollbar can work horizontally or vertically. That can also change while working on a bilingual website that supports both left-to-right (LTR) and right-to-left (RTL) navigation.
Customizing A Scrollbar Design
Here is how we can customize the scrollbar based on the mockup above :
/* scrollbar */
::-webkit-scrollbar {
width: 0.6rem;
background: #bdbdbd;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #2b2b2b;
border-radius: 10px;
}
Thank you for reading! So far, we’ve looked at how to modify several scrollbar designs.
