Look at the code first, just copy and use, the following code can be copied and pasted to use (I will explain the code in the form of comments, you will see the following effects). The original scroll bar is relatively square, not sleek enough, and can't satisfy our aesthetics to a large extent. Sometimes its style needs to be modified. 滚动条的高度将随着内容的多少自适应
< ! DOCTYPE html>
< html lang= "zh" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> < / title>
< / head>
< style type= "text/css" >
. Count- box{
height: 220 px;
width: 227 px;
overflow: auto;
display: inline- block;
}
. countSon{
height: 40 px;
margin: 8 px;
line- height: 40 px;
text- align: center;
}
. Count- box- zero: : - webkit- scrollbar {
width: 6 px;
height: 220 px;
}
. Count- box- zero: : - webkit- scrollbar- thumb {
border- radius: 3 px;
box- shadow: inset 0 0 5 px rgba ( 0 , 0 , 0 , 0.2 ) ;
background: rgba ( 0 , 0 , 0 , 0.2 ) ;
}
. Count- box- zero: : - webkit- scrollbar- track {
box- shadow: inset 0 0 0 px rgba ( 0 , 0 , 0 , 0.2 ) ;
border- radius: 0 ;
background: rgba ( 0 , 0 , 0 , 0.1 ) ;
}
. Count- box- one: : - webkit- scrollbar {
width: 6 px;
height: 220 px;
}
. Count- box- one: : - webkit- scrollbar- thumb {
border- radius: 3 px;
box- shadow: inset 0 0 5 px rgba ( 0 , 0 , 0 , 0.2 ) ;
background: red;
}
. Count- box- one: : - webkit- scrollbar- track {
box- shadow: inset 0 0 0 px rgba ( 0 , 0 , 0 , 0.2 ) ;
border- radius: 0 ;
background: skyblue;
}
< / style>
< body>
< div class = "Count-box-zero Count-box" >
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< / div>
< div class = "Count-box-one Count-box" >
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< / div>
< div class = "Count-box-two Count-box" >
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< div class = "countSon" > 占位内容< / div>
< / div>
< / body>
< / html>
Additional and useful information that may appear has been annotated
