css 改变滚动条样式

1.滚动条组成　

• ::-webkit-scrollbar 滚动条整体部分
• ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
• ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

2.滚动条样式修改

/* 滚动条出现不出现 当摸个滚动条不想让出现是可以这样*/
#content_right::-webkit-scrollbar {
    display: none;
}
   /*样式改变代码-----------------------------------------------------*/
/* 滚动条整体部分 */
.topnav_box::-webkit-scrollbar   
{  
   width:10px;
   height:10px;     
   background-color:#d0cdc7;
}  
/* scroll轨道背景 */
.topnav_box::-webkit-scrollbar-track       
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px; 
    background-color:#d0cdc7;    
}

/* 滚动条中能上下移动的小块 */
.topnav_box::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color:#a09d9d;
} 

 /*样式改变代码-----------------------------------------------------*/

使用是 页面元素有滚动的条的要有这个类

html:

<ul id="treemx" class="ztree topnav_box"></ul>

css: 同时css要有滚动的代码

ul.ztree {

       margin-top: 10px;

       border-top: 0;

       background: white;

        100%;

       height: 330px;

       overflow-y: auto;

       overflow-x: auto;//auto  为自动出现  scroll 为一直出现

}