How to style through css a scrollbar inside a block
Unique scrollbar style for an individual block on the page.
The color of the track along which the scroll bar moves.
.youstyle::-webkit-scrollbar-track { background-color: black }
Strip slider color and corner radius.
.youstyle::-webkit-scrollbar-thumb { -webkit-border-radius: 0px; border-radius: 0px; background-color:orange; }
Scroll bar width.
.youstyle::-webkit-scrollbar{ width: 4px; }
I will give an example of two blocks with different styles.
Example 1.
.ex1::-webkit-scrollbar-button { background-image:url(''); background-repeat:no-repeat; width:5px; height:0px } .ex1::-webkit-scrollbar-track { background-color:#ecedee } .ex1::-webkit-scrollbar-thumb { -webkit-border-radius: 0px; border-radius: 0px; background-color:#6dc0c8; } .ex1::-webkit-scrollbar-thumb:hover{ background-color:#56999f; } .ex1::-webkit-resizer{ background-image:url(''); background-repeat:no-repeat; width:4px; height:0px } .ex1::-webkit-scrollbar{ width: 4px;} .ex1 { background-color: white; width: 250px; height: 50px; overflow: auto; padding: 20px; border-style: groove; border-radius: 7px; }
Example 2.
.ex2::-webkit-scrollbar-button { background-image:url(''); background-repeat:no-repeat; width:6px; height:0px } .ex2::-webkit-scrollbar-track { background-color:#32312e; box-shadow:0px 0px 3px #000 inset; } .ex2::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background-color:#ffcb17; box-shadow:0px 1px 1px #fff inset; background-image:url('https://spage.me/site/picter/pic_scrollbar_thumb.png'); background-position:center; background-repeat:no-repeat; } .ex2::-webkit-resizer{ background-image:url(''); background-repeat:no-repeat; width:7px; height:0px } .ex2::-webkit-scrollbar{ width: 11px; }
if you want to scroll the whole page, then remove the class .youclass before ::-webkit-
::-webkit-scrollbar-button { background-image:url(''); background-repeat:no-repeat; width:6px; height:0px } ::-webkit-scrollbar-track { background-color:#32312e; box-shadow:0px 0px 3px #000 inset; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background-color:#ffcb17; box-shadow:0px 1px 1px #fff inset; background-image:url('https://spage.me/site/picter/pic_scrollbar_thumb.png'); background-position:center; background-repeat:no-repeat; } ::-webkit-resizer{ background-image:url(''); background-repeat:no-repeat; width:7px; height:0px } ::-webkit-scrollbar{ width: 11px; }
Documentation for this css property is here
Categories: