怎样隐藏“滚动条”?
什么是“滾動(dòng)條”？
滾動(dòng)條是指圖右側(cè)被紅線框起來的部分：
只要網(wǎng)頁(yè)內(nèi)容大于視圖，滾動(dòng)條就會(huì)出現(xiàn)。
一般來說，只要不是 body 層次的滾動(dòng)條，使用 overflow: hidden; 就能解決滾動(dòng)條出現(xiàn)的問題，但是此時(shí)頁(yè)面也會(huì)變得無法捲動(dòng)。
目前網(wǎng)絡(luò)上已經(jīng)有諸多可以隱藏非 body 層次的滾動(dòng)條又可捲動(dòng)頁(yè)面的方法，所以本文主要聚焦于如何隱藏瀏覽器（也就是 body 層次）的滾動(dòng)條。
解決方法
針對(duì)不同的瀏覽器，有不同的隱藏滾動(dòng)條的方法，以下針對(duì)三大瀏覽器 chrome、ie（包括 edge）、Firefox 分別敘述：
Chorme
body::-webkit-sxrollbar {display: none; }IE/Edage
body {-ms-overflow-style: none; }Firefox
Firefox 是三者中最麻煩的：
html {overflow: -moz-hidden-unscrollable; /*注意！若只用 hidden，chrome 的其它 hidden 會(huì)出問題*/height: 100%; }body {height: 100%;width: calc(100vw + 18px); /*瀏覽器滾動(dòng)條的長(zhǎng)度大約是 18px*/overflow: auto; }到此還沒有結(jié)束，你還要在一些地方加上 width: 100vw;
假設(shè)你的 html 長(zhǎng)這樣：
<body><div id="example-1"><p>難臺(tái)子哥式自不家草要計(jì)在來也見加正活書。</p></div><article id="example-2"><h1>意家的不稱打準(zhǔn)無政！</h1><p>得研河金起里美希孩有人裡人。料低不。</p><button>處拉</button></article> </body>那你的 CSS 就還要再加上：
#example-1 {width: 100vw; }#example-2 {width: 100vw; }總結(jié)
綜上所述，如果你想讓三大瀏覽器的滾動(dòng)條都隱藏，并且可以捲動(dòng)，那你的CSS就至少要長(zhǎng)這樣：
html {overflow: -moz-hidden-unscrollable;height: 100%; }body::-webkit-scrollbar {display: none; }body {-ms-overflow-style: none;height: 100%;width: calc(100vw + 18px);overflow: auto; }至于 width: 100vw; 要加在何處，就要看你的HTML結(jié)構(gòu)長(zhǎng)怎樣了。
優(yōu)點(diǎn)
可以讓讀者更聚焦于內(nèi)文，而不會(huì)看到滾動(dòng)條很短就懶得看、跳出網(wǎng)頁(yè)，或一心急，就把滾動(dòng)條直接往下拉。換言之，就是強(qiáng)迫讀者慢慢地把內(nèi)容看完。
缺點(diǎn)
假如讀者想往回看，可能就會(huì)要滾很久。所以，如果你想為較長(zhǎng)的內(nèi)文隱藏滾動(dòng)條，建議應(yīng)有導(dǎo)覽列，讓讀者可以快速跳轉(zhuǎn)到某處。
轉(zhuǎn)載于:https://www.cnblogs.com/webbest/p/8335258.html
總結(jié)
以上是生活随笔為你收集整理的怎样隐藏“滚动条”?的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2018.01.21.一周机器学习周记
- 下一篇： 网络爬虫re模块的findall()函数