怎樣隱藏“滾動條”?
阿新 • • 發佈：2018-01-23
data- line play http webkit .com 至少 llb 其它
什麽是“滾動條”？
滾動條是指圖右側被紅線框起來的部分：
只要網頁內容大於視圖，滾動條就會出現。
一般來說，只要不是 body 層次的滾動條，使用 overflow: hidden; 就能解決滾動條出現的問題，但是此時頁面也會變得無法捲動。
目前網絡上已經有諸多可以隱藏非 body 層次的滾動條又可捲動頁面的方法，所以本文主要聚焦於如何隱藏瀏覽器（也就是 body 層次）的滾動條。
解決方法
針對不同的瀏覽器，有不同的隱藏滾動條的方法，以下針對三大瀏覽器 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 會出問題*/ height: 100%; } body { height: 100%; width: calc(100vw + 18px); /*瀏覽器滾動條的長度大約是 18px*/ overflow: auto; }
到此還沒有結束，你還要在一些地方加上 width: 100vw;
假設你的 html 長這樣：
<body>
<div id="example-1">
<p>難臺子哥式自不家草要計在來也見加正活書。</p>
</div>
<article id="example-2">
<h1>意家的不稱打準無政！</h1>
<p>得研河金起裏美希孩有人裡人。料低不。</p>
<button>處拉</button>
</article>
</body>那你的 CSS 就還要再加上：
#example-1 { width: 100vw; } #example-2 { width: 100vw; }
總結
綜上所述，如果你想讓三大瀏覽器的滾動條都隱藏，並且可以捲動，那你的CSS就至少要長這樣：
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結構長怎樣了。
優點
可以讓讀者更聚焦於內文，而不會看到滾動條很短就懶得看、跳出網頁，或一心急，就把滾動條直接往下拉。換言之，就是強迫讀者慢慢地把內容看完。
缺點
假如讀者想往回看，可能就會要滾很久。所以，如果你想為較長的內文隱藏滾動條，建議應有導覽列，讓讀者可以快速跳轉到某處。
怎樣隱藏“滾動條”?