Mire el código primero, solo copie y use, el siguiente código se puede copiar y pegar para usar (explicaré el código en forma de comentarios, verá los siguientes efectos). La barra de desplazamiento nativa es relativamente cuadrada y no lo suficientemente elegante; en gran medida, no puede satisfacer nuestra estética y, a veces, su estilo debe modificarse. 滚动条的高度将随着内容的多少自适应
< ! 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>
Se ha anotado información adicional y útil que pueda aparecer
