chrome等浏览器滚动条的设计

/* 滚动条的样式 */
/* 滚动条样式 */
/*  1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
    2. ::-webkit-scrollbar-button 滚动条两端的按钮
    3. ::-webkit-scrollbar-track  外层轨道
    4. ::-webkit-scrollbar-track-piece  内层滚动槽
    5. ::-webkit-scrollbar-thumb 滚动的滑块
    6. ::-webkit-scrollbar-corner 边角
    7. ::-webkit-resizer 定义右下角拖动块的样式 
*/


::-webkit-scrollbar {
     width: 10px;
    }
    
::-webkit-scrollbar-track {
     -webkit-box-shadow:inset 0 0 6px #EAEAEA;
     border-radius:10px;
}
    
::-webkit-scrollbar-track-piece {
    background-color: rgba(233, 233, 233, 1);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    border-radius: 5px;
 }
    
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #515151;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

隐藏滚动条

```css
html {
   /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
   -ms-overflow-style:none;
}
/*Chrome下隐藏滚动条，溢出可以透明滚动*/
html::-webkit-scrollbar{width:0px}

Firefox隐藏滚动条可以用以下方法：
大体思路是在div外面再套一个div。这个div设置overflow:hidden，而内容div设置 overflow-y: scroll;overflow-x: hidden；然后再设置外层div的width小于内层div的width。

Chrome自定义滚动条

/*----- 滚动条 -------*/
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.2);  }
::-webkit-scrollbar {  width: 0px;height:8px;  background-color: #F5F5F5;border-radius: 5px;  }
::-webkit-scrollbar-thumb { /* */background: #0C4EA2;border-radius: 5px; }
::-webkit-scrollbar-corner{ background-color: #F5F5F5;}