Creating a custom scrollbar
Recently, I figured out about customizing scrollbars. Adding custom scrollbars to websites you make, helps enhance it even further and also helps in overall color-coordination.
To start with, we use ::-webkit-scrollbar.It can be included in your CSS section. It's a pseudo element used to modify the look of a browsers scrollbar. Most browsers other than firefox support this.
A sample example of the code would be-
/* width */::-webkit-scrollbar { width: 10px;}
This section targets the width of your scrollbar.
/* Track */::-webkit-scrollbar-track { background: #f1f1f1;}
This relates to the progress bar. Properties such as border radius, box shadow can also be added.
/* Handle */::-webkit-scrollbar-thumb { background: #888;}
It specifies the properties of the scrolling handle that can be dragged.
To design that even further you can try-
/* Handle on hover */::-webkit-scrollbar-thumb:hover { background: #555;}
This will change the color upon hovering.
Similarly some of the other pseudo elements you can use are-
::-webkit-scrollbar-button
the buttons on the scrollbar (arrows pointing upwards and downwards).
::-webkit-scrollbar-track-piece
the track (progress bar) NOT covered by the handle.
::-webkit-scrollbar-corner
the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet
and many more
Hope it helps!!
Original Link: https://dev.to/anjalijha22/creating-a-custom-scrollbar-k1o
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To