溢出隱藏，隱藏滾動(dòng)條適用于各個(gè)瀏覽器
2022-12-10 加入收藏
什麼是＂滾動(dòng)條＂？
滾動(dòng)條指的是下圖右側(cè)被紅線框起來(lái)的部分：
只要網(wǎng)頁(yè)內(nèi)容大于視窗，滾動(dòng)條就會(huì)出現(xiàn)。
一般來(lái)說(shuō)，只要不是body層次的滾動(dòng)條，那用overflow: hidden;就能解決滾動(dòng)條出現(xiàn)的問(wèn)題，但此時(shí)頁(yè)面也會(huì)變得無(wú)法捲動(dòng)。
目前網(wǎng)路上已經(jīng)有諸多可隱藏非body層次的滾動(dòng)條又可捲動(dòng)頁(yè)面的教學(xué)，所以本文主要聚焦于如何隱藏瀏覽器（也就是body層次）的滾動(dòng)條。
解決方法
針對(duì)不同的瀏覽器，有不同的隱藏滾動(dòng)條的方法，以下針對(duì)三大瀏覽器 chrome、ie（包括 edge）、firefox 分別敘述之：
Chorme
body::-webkit-scrollbar {
display: none;
}
1
2
3
4
IE/Edge
body {
-ms-overflow-style: none;
}
1
2
3
Firefox
firefox 是三者之中最麻煩的：
html {
overflow: -moz-hidden-unscrollable; /*注意！若只打 hidden，chrome 的其它 hidden 會(huì)出問(wèn)題*/
height: 100%;
}
body {
height: 100%;
width: calc(100vw + 18px); // 瀏覽器滾動(dòng)條的長(zhǎng)度大約是 18px
overflow: auto;
}
1
2
3
4
5
6
7
8
9
到此還沒結(jié)束，你還要在一些地方加上width: 100vw;。
假設(shè)你的HTML長(zhǎng)這樣：
<body>
<div id="example-1">
<p>難臺(tái)子哥式自不家草要計(jì)在來(lái)也見加正活書。</p>
</div>
<article id="example-2">
<h1>意家的不稱打準(zhǔn)無(wú)政！</h1>
<p>得研河金起里美希孩有人裡人。料低不。</p>
<button>處拉</button>
</article>
</body>
1
2
3
4
5
6
7
8
9
10
那你的CSS就還要再加上：
#example-1 {
width: 100vw;
}
#example-2 {
width: 100vw;
}
1
2
3
4
5
6
總結(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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
至于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)覽列，讓讀者可以快速跳到某一處。
————————————————
版權(quán)聲明：本文為CSDN博主「托尼沙灘褲」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44070058/article/details/112555450
