分享2種方法實(shí)現(xiàn)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;
}
下一回將分析自定義好看的滾動條馋缅,盡情期待哦P尾 !!!