Lets face it. We as developers and designers spends hours on designing the webpage that should looks good, feels good and drive sales/convert customer. We spends hours on micro-animations. Then Why not design the scroll too. In this artile I'll show you how to do that.
The scrollbar has basically 2 components. That is scrollbar-track
and scrollbar-thumb
.
And we need to tweek ::-webkit-scrollbar
pseudo element to modify the look of the browser's scrollbar.
Here the code that you need to design a simple scrollbar which has a width of 10px, A black trackbar and a red thumb.
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ff2b2b;
}
::-webkit-scrollbar-thumb {
background: #ff5252;
}
That's it? Well you can use vertical-scroll::-webkit-scrollbar-track {}
to design the horizontal scrollbar.
You can use other css properties background
, border-radius
, box-shadow
and similar.
Top comments (0)