Css: modifies the default style of a scroll bar.

Css: modifies the default style of a scroll bar.

 

Page HTML:

　　

1 <div class = "inner"> 2 <div class = "innerbox"> 3 <p style = "height: 200px; "> This is 111 content </p> 4 <p style =" height: 400px; "> content 222 </p> 5 <p> content 333 </p> 6 </div> 7 </div>

 

Css code:

　　

1. inner {2 width: 265px; 3 height: 400px; 4 position: absolute; 5 top: 33px; 6 left: 13px; 7/* cursor: pointer; */8 overflow: hidden; 9} 10. innerbox {11 overflow-x: hidden; 12 overflow-y: auto; 13 color: #000; 14 font-size :. 7rem; 15 font-family: "\ 5FAE \ 8F6F \ 96C5 \ 9ED1", Helvetica, "", Arial, Tahoma; 16 height: 100%; 17} 18/* scroll bar style */19. innerbox:-webkit-scrollbar {/* overall scroll bar style */20 width: 4px;/* height and width correspond to the size of the horizontal and vertical scroll bars */21 height: 4px; 22} 23. innerbox:-webkit-scrollbar-thumb {/* small box in the scroll bar */24 border-radius: 5px; 25-webkit-box-shadow: inset 0 0 5px rgba (0, 0, 0, 0.2); 26 background: rgba (0.2, 0,); 27} 28. innerbox:-webkit-scrollbar-track {/* track in the scroll bar */29-webkit-box-shadow: inset 0 0 5px rgba (0, 0, 0, 0.2 ); 30 border-radius: 0; 31 background: rgba (0.1, 0,); 32}