隱藏滾動條的方法:首先使用“::-webkit-scrollbar”偽類選擇器選中元素的滾動條,然后使用“display:none;”樣式隱藏滾動條即可;具體語法格式“::-webkit-scrollbar{display:none;}”。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
可以使用自定義滾動條的偽對象選擇器::-webkit-scrollbar設(shè)置隱藏滾動條。
使用此偽類選擇器隱藏滾動條css代碼:
.element::-webkit-scrollbar {display:none}
如果要兼容 PC 其他瀏覽器(IE、Firefox 等),可以使用以下方法。在容器外面再嵌套一層 overflow:hidden 內(nèi)部內(nèi)容再限制尺寸和外部嵌套層一樣,就變相隱藏了。
<div class="outer-container"> <div class="inner-container"> <div class="content"> ...... </div> </div> </div>
css代碼:
.outer-container,.content { width: 200px; height: 200px; } .outer-container { position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } /* for Chrome */ .inner-container::-webkit-scrollbar { display: none; }
推薦學(xué)習(xí):css視頻教程