分享2种方法实现CSS如何隐藏滚动条并且还是滚动啦!
方法一:偷梁换柱法
.dpape-box {
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid #f1f1f1;
}
.dpape-box .dpape-scroll {
width: 320px;
overflow: hidden;
height: 200px;
overflow-y: scroll;
}
/* 20px 几乎在所有浏览器都看不见*/
.dpape-box .dpape-scroll .dpape-ctx {
padding-right: 20px;
}
方法二:css伪类大法(如果需要考虑兼容性问题建议使用偷梁换柱法)
.dpape-box {
overflow: hidden;
width: 300px;
height: 200px;
overflow-y: scroll;
/* Firefox */
scrollbar-width: none;
/* IE 10+ */
-ms-overflow-style: none;
}
.dpape-box::-webkit-scrollbar {
/* Chrome Safari */
display: none;
}
下一回将分析自定义好看的滚动条,尽情期待哦!!!!