1.滚动条组成
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
- ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
- ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
- ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
- ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
2.滚动条样式修改
1 /* 滚动条出现不出现 当摸个滚动条不想让出现是可以这样*/ 2 #content_right::-webkit-scrollbar { 3 ????display: none; 4 }
??/*样式改变代码-----------------------------------------------------*/ 5 /* 滚动条整体部分 */ 6 .topnav_box::-webkit-scrollbar ???7 { ??8 ???width:10px; 9 ???height:10px; ????10 ???background-color:#d0cdc7;11 } ?12 /* scroll轨道背景 */13 .topnav_box::-webkit-scrollbar-track ??????14 { ?15 ????-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ?16 ????border-radius: 10px; 17 ????background-color:#d0cdc7; ???18 }19 20 /* 滚动条中能上下移动的小块 */21 .topnav_box::-webkit-scrollbar-thumb ?22 { ?23 ????border-radius: 10px; ?24 ????-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); ?25 ????background-color:#a09d9d;26 } /*样式改变代码-----------------------------------------------------*/
使用是 页面元素有滚动的条的要有这个类
html:
<ul id="treemx" class="ztree topnav_box"></ul>
css: 同时css要有滚动的代码
ul.ztree {
margin-top: 10px;
border-top: 0;
background: white;
width: 100%;
height: 330px;
overflow-y: auto;
overflow-x: auto;//auto 为自动出现 scroll 为一直出现
css 改变滚动条样式
原文地址：https://www.cnblogs.com/ylboke/p/9198620.html