Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 19, 2021 02:28 pm GMT

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!!

End


Original Link: https://dev.to/anjalijha22/creating-a-custom-scrollbar-k1o

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To