怎麼把"滾動條"隱藏?

Yeefun發表於2018-01-19

問題釐清

什麼是"滾動條"?

滾動條指的是下圖右側被紅線框起來的部分:

怎麼把"滾動條"隱藏?

只要網頁內容大於視窗,滾動條就會出現。

一般來說,只要不是body層次的滾動條,那用overflow: hidden;就能解決滾動條出現的問題,但此時頁面也會變得無法捲動。

目前網路上已經有諸多可隱藏非body層次的滾動條又可捲動頁面的教學,所以本文主要聚焦於如何隱藏瀏覽器(也就是body層次)的滾動條。

解決方法

針對不同的瀏覽器,有不同的隱藏滾動條的方法,以下針對三大瀏覽器 chrome、ie(包括 edge)、firefox 分別敘述之:

Chorme

body::-webkit-scrollbar {
    display: none;
}
複製程式碼

IE/Edge

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結構長怎樣了。

優點

可以讓讀者更聚焦於內文,而不會看到滾動條很短就懶得看、跳出網頁,或一心急,就把滾動條直直往下拉。換言之,就是強迫讀者慢慢地把內容看完。

缺點

假如讀者想往回看,可能就會要滾很久。所以,如果你想為較長的內文隱藏滾動條,建議應有導覽列,讓讀者可以快速跳到某一處。


若這篇文章有解決你的問題,歡迎你按愛心或收藏。
如果有任何疑惑或建議,都可在下方留言,一起交流、學習☺

相關文章