css-scroll bar style setting

The reason for the scroll bar

Adding the overflow: scroll style to an element that can set width and height will cause a scroll bar to be generated in the element area.

scrollbar default style

The following writing cases are all tested in the Edge browser environment.

insert image description here

Set scroll bar style

Affect the scrollbar style by setting the ::-webkit-scrollbar pseudo-element, note that it is only available on Blink or Webkit based browsers.

::-webkit-scrollbar

Used to style the entire scrollbar.

eg: set scroll bar size and background color

<!-- html -->
<div class="box">
  text text text text text text text text  
  text text text text text text text text
  text text text text text text text text
  text text text text text text text text
  text text text text text text text text  
  text text text text text text text text
  text text text text text text text text  
</div>
<!-- css -->
.box::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  background-color: red;
}

insert image description here

::-webkit-scrollbar-thumb

scroll thumb on scroll bar

eg: set the background color of the slider

.box::-webkit-scrollbar-thumb{
    
    
  background-color: blue;
}

insert image description here

::-webkit-scrollbar-track

Scroll bar track, the difference from ::-webkit-scrollbar is that ::-webkit-scrollbar-track sets the style of the slider sliding area.

eg: Set the background color of the scroll bar track

.box::-webkit-scrollbar-track{
    
    
  background-color: yellow;
}

insert image description here

::-webkit-scrollbar-track-piece

The track portion of a scroll bar without a slider. ::-webkit-scrollbar-track-piece has the same effect as ::-webkit-scrollbar-track , the former sets the style of the entire track, and the latter sets the style of the entire track except the area occupied by the slider. So it's visually consistent.

eg: Set the track style to remove the slider part

.box::-webkit-scrollbar-track-piece{
    
    
  background-color: green;
}

insert image description here

::-webkit-scrollbar-corner

The intersection of both vertical and horizontal scrollbars when they are included. Usually the bottom right corner of the element.

eg: Set the background color of the intersection of horizontal and vertical scroll bars.

.box::-webkit-scrollbar-corner{
    
    
  background-color: cyan;
}

insert image description here

::-webkit-resizer

When the element is set to be draggable (resize: horizontal | vertical | both), a slider will appear at the bottom corner of the element to adjust the size of the element.

eg: Sets the background color of the slider that resizes the element.

.box{
    
    
  resize: horizontal;
}
.box::-webkit-resizer{
    
    
  background-color: rgb(242, 5, 151);
}

insert image description here

::webkit-scrollbar-button

Set up and down (left and right) scroll buttons (up and down, left and right arrows) at both ends of the scroll bar.

eg: this is the button style

.box::-webkit-scrollbar-button{
    
    
  background-color: pink;
  border-radius: 20px;
  width: 20px;
}

insert image description here

Summarize

The entire scroll bar mainly includes the scroll slider up and down (left and right) scroll button slider slide track these parts. Use these pseudo-elements carefully to set the scrollbar style, because these features are non-standard and do not work in some browsers, depending on the user's usage environment.