如何自定义滚动条？_html/css_WEB-ITnose

 1  2      3          4          5         32     33     34         
35 36 
37 #scrollbar{38 width:200px;39 height:200px;40 margin:100px auto;41 border: 1px #eee solid;42 background-color:#eee;43 display:inline-block;44 }45 /*凹槽宽度*/46 #scrollbar::-webkit-scrollbar{47 width:8px;48 height:8px;49 }50 /*拖动条*/51 #scrollbar::-webkit-scrollbar-thumb{52 background-color:ragb(0,0,0,0.3);53 border-radius:6px;54 }55 /*背景槽*/56 #scrollbar::-webkit-scrollbar-track{57 background-color:#ddd;58 border-radius:6px;59 }60 
61 62  
63 64         
65     66 

效果如下：

主要使用的是::-webkit-scrollbar（凹槽），::-webkit-scrollbar-thumb（拖动块），::-webkit-scrollbar-track（背景槽）的属性来定义滚动条！