CSS3 custom scroll bar style-webkit-scrollbar

When the content is outside the container, the container will appear scroll bar, its own scroll bar sometimes does not meet our aesthetic requirements, then we can use CSS pseudo-class to implement the scroll bar customization.

First we need to understand the scroll bar. The scroll bar from the appearance is composed of two parts: 1, you can slide the part, we call it slider 2, the track of the scroll bar, that is, the slider track, generally speaking, the color of the slider is darker than the color of the track.

The CSS style of the scroll bar consists of three main parts:

1,::-webkit-scrollbar defines the overall style of the scroll bar;

2,::-webkit-scrollbar-thumb slide block part;

3,::-webkit-scrollbar-thumb track part;

below with Overflow-y:auto; for example (Overflow-x:auto)

HTML code:

<divclass="test test-1">

         < div class="scrollbar"></ div > </ div >CSS code: .test{      width :  50px ;      height :  200px ;      overflow :  auto ;      float :  left ;      margin :  5px ;      border :  none ; } .scrollbar{      width :  30px ;      height :  300px ;      margin :  0 auto ; } .test -1: :-webkit-scrollbar { /*滚动条整体样式*/          width :  10px ;      /*高宽分别对应横竖滚动条的尺寸*/          height :  1px ;      } .test -1: :-webkit-scrollbar-thumb { /*滚动条里面小方块*/          border-radius:  10px ;           -webkit-box-shadow:  inset 0 0 5px rgba( 0 , 0 , 0 , 0.2 );          background :  #535353 ;      } .test -1: :-webkit-scrollbar-track { /*滚动条里面轨道*/          -webkit-box-shadow:  inset 0 0 5px rgba( 0 , 0 , 0 , 0.2 );          border-radius:  10px ;          background :  #EDEDED ;      }If you want to change the width of the scroll bar: Change in::-webkit-scrollbar, if you want to change the fillet of the ScrollBar slider, change in::-webkit-scrollbar-thumb, if you want to change the fillet of the track in::- Change in Webkit-scrollbar-track;

CSS3 custom scroll bar style-webkit-scrollbar