profi.spage.me

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;
}

DEMO 1

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;
}

DEMO 2

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