闲话少说
项目中需要将滚动条隐藏但是滚动效果还有,开发时谷歌倒是很配合,但是ie就是不起效果,调试良久最后才解决此问题。(火狐就不讨论了,应该是要用jq去控制的)
谷歌
直接在你要隐藏滚动条的页面加一段css代码就行:
/* 定义滚动条样式 */
::-webkit-scrollbar {
width: 0px;
display:block;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
background-color: rgba(240, 240, 240, .5);
}
IE
给需要隐藏滚动条的页面的div中加上一段css,比如我这个according的class属性。
.accordion{
overflow-y: auto!important;
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
}
总结
没啥好总结的,谷歌只要将代码引入到你的对应页面的css文件中即可,IE就找到你要做这个操作的div,给它的class加上那段代码就行。亲测有用,没用你来打我!