在PC端隱藏html右側(cè)默認(rèn)滾動(dòng)條
html {
/*隱藏滾動(dòng)條痪署,當(dāng)IE下溢出码泞,仍然可以滾動(dòng)*/
-ms-overflow-style:none;
/*火狐下隱藏滾動(dòng)條*/
scrollbar-width: none;
}
/*Chrome下隱藏滾動(dòng)條,溢出可以透明滾動(dòng)*/
html::-webkit-scrollbar{width:0px}
ie/Edge的樣式會(huì)使頁(yè)面內(nèi)所有滾動(dòng)條隱藏狼犯。Chrome和火狐會(huì)隱藏右側(cè)默認(rèn)滾動(dòng)條余寥,想要隱藏某個(gè)標(biāo)簽內(nèi)滾動(dòng)條要單獨(dú)給予相應(yīng)樣式。
移動(dòng)端隱藏滾動(dòng)條
上面ie與火狐樣式也可用于移動(dòng)端悯森。但Chrome(右側(cè)默認(rèn)滾動(dòng)條)就不可以了宋舷。
這里我只說(shuō)我用到的方式,Chrome移動(dòng)端想要用::-webkit-scrollbar{width:0px}的樣式隱藏右側(cè)默認(rèn)滾動(dòng)條瓢姻。需要設(shè)置html,body的width和height
html,body{ width: 100%; height: 100%; overflow: scroll;}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;}
body{margin:0;}
這樣移動(dòng)端右側(cè)默認(rèn)滾動(dòng)條就隱藏了祝蝠。如果只是隱藏某個(gè)標(biāo)簽內(nèi)出現(xiàn)的滾動(dòng)條單獨(dú)給予樣式::-webkit-scrollbar{width:0px}即可,不用設(shè)置上述樣式。