博主在工作中遇到修改滚动条样式的情况，效果如下：
1.重写滚动条样式，兼容IE，谷歌。
2.鼠标移入元素显示滚动条，鼠标移出隐藏滚动条。
注意：
1.互不干扰：首先说明的是谷歌的css滚动条样式的写法与IE完全不同，IE浏览器只识别IE下的滚动条的写法，谷歌浏览器也不会识别到IE下的滚动条的写法。不会出现同一行css在不同的浏览器显示效果不同的情况，所以就放心大胆的写吧~~~
2.IE限制：IE浏览器下的滚动条不能设置宽高、结构，只允许修改颜色，当IE浏览器不能与谷歌滚动条样式调成完全一样时，还是写两种滚动条吧~勉强不来的哦！
代码如下：
/*chrome--------------------------------------------start*/::-webkit-scrollbar {width: 8px;height: 8px;}/* Track */::-webkit-scrollbar-track {background: rgb(255, 255, 255);border-radius: 8px;}/* Handle */::-webkit-scrollbar-thumb {background: rgb(201, 201, 202);border-radius: 8px;}/* Handle on hover */::-webkit-scrollbar-thumb:hover {background: rgb(162, 162, 163);} .el-menu::-webkit-scrollbar,.el-table__body-wrapper::-webkit-scrollbar {display: none;}.el-menu:hover::-webkit-scrollbar,.el-table__body-wrapper:hover::-webkit-scrollbar {display: block;}/*chrome--------------------------------------------end*//*IE--------------------------------------------start*/*{/*三角箭头的颜色*/scrollbar-arrow-color: #c0c4cc;/*滚动条滑块按钮的颜色*/scrollbar-face-color: #A2A2A3;/*滚动条整体颜色*/scrollbar-highlight-color: #A2A2A3;/*滚动条阴影*/scrollbar-shadow-color: #A2A2A3;/*滚动条轨道颜色*/scrollbar-track-color: #f4f4f5;/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/scrollbar-3dlight-color:#A2A2A3;/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/scrollbar-darkshadow-color: #A2A2A3;/*滚动条基准颜色*/scrollbar-base-color: #f4f4f5; }.el-table__body-wrapper,.el-menu{/*IE下隐藏*/-ms-overflow-style:none; }.el-table__body-wrapper:hover,.el-menu:hover{ /*IE下显示*/-ms-overflow-style:auto; } /*IE--------------------------------------------end*/
效果
谷歌浏览器的效果：鼠标未移入
谷歌浏览器的效果：鼠标移入后
IE浏览器的效果：鼠标未移入
IE浏览器的效果：鼠标移入后
若您需要引用、转载，请注明来源及原文链接哦~ (▽)。
