CSS3 custom scroll style and css3 custom scroll

CSS3 custom scroll style and css3 custom scroll

The css style is as follows:

# Div1 {width: 200px; height: 400px; background: red; overflow: auto;
} # Div1:-webkit-scrollbar {width: 5px; height: 5px;} # div1:-webkit-scrollbar-track {background: hotpink; // track style} # div1:-webkit-scrollbar-thumb {background: deeppink; // Sliding bar style} # div1:-webkit-scrollbar-thumb: hover {background: palevioletred; // move the mouse to the style of the slider} # div1:-webkit-scrollbar-button {background: orange; // fine-tune the style of the button, for example, the orange part is located at the two ends of the track, border-radius: 15px;} # div1:-webkit-scrollbar-corner {background: green; // corner, that is, the intersection of the two scroll bars, such as the middle green section} # div2 {width: 300px; height: 500px; background: pink ;}

The html is as follows:

<Div id = 'div1 '> <div id = 'div2'> 1 <br/> 2 <br/> 3 <br/> 4 <br/> 5 <br/> 6 <br/> 7 <br/> </div>

The effect is as follows: