浏览器滚动条的隐藏与样式修改

隐藏滚动条

一丶利用css隐藏

/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
.contentWrap::-webkit-scrollbar {  
   width:0 !important;  
   background: transparent;  
   // 或者可以使用 display: none;
}        
/* 兼容IE10+ */
.contentWrap{ -ms-overflow-style: none; }
 /* 但是firefox代码无效 */
.contentWrap{ overflow: -moz-scrollbars-none; } // 不生效

火狐浏览器使用此方式无法隐藏

二丶利用两个div

在div外面再套一个div，外层div设置overflow:hidden， 内层div设置 overflow-y: scroll;overflow-x: hidden；然后再设置外层div的width小于内层div的width；这样实际内层div是有滚动条的，但是被外层隐藏掉了。

.outcontentWrap{
    position: relative;
    overflow: hidden;
}
.contentWrap{
    overflow-x:hidden;
    overflow-y:scroll;
    position: absolute; 
    top:0;
    bottom:0;   /*相当于height:100%时的高度*/
    left: 0;
    right:-17px;  /*图层宽度大于width:100%,滚动条的宽度刚刚好被隐藏 */
}

三丶使用插件

这种方式还没试过

前两种方式都试过，是可以实现的，最好选用第二种，第一种火狐浏览器不能实现隐藏滚动条

修改滚动条样式

滚动条的样式是可以改变的
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

.tablePart::-webkit-scrollbar{width:5px;}
.tablePart::-webkit-scrollbar-thumb{border-radius: 10px;}
.tablePart::-webkit-scrollbar-track{background-color:#FFFFFF;}
.tablePart::-webkit-scrollbar-thumb{background-color:#D6D7De;}
.tablePart::-webkit-scrollbar-thumb:hover{background-color:#C1C7CB;}

效果如下：