完全移除水平滾動條

Question

有沒有辦法讓網頁上的水平滾動條完全擺脫？

命令「overflow-x：hidden;」 body/html隱藏視覺風格，但功能實際上仍然存在，如果你使用鍵盤上的箭頭，哪種吸引...

Answer 1

你問如何擺脫滾動條，是的，overflow: hidden是要走的路。

如果問題是關於如何避免滾動，最好的方法是設計不溢出的網頁，可能使用動態流暢設計和媒體查詢的組合來保持內容的寬度和高度。

但我真的會建議反對。您無法事先知道您的訪問者將擁有多大的窗口大小。你有沒有想過在大屏幕和小屏幕上的可用性差異？移動瀏覽器如何？

如果你真的固定決不讓滾動，你可以使用下面的CSS是偷偷摸摸的魔鬼伎倆：

body { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
} 

但正如我所說，我不會推薦它...此外，它可能不適用於舊版瀏覽器。 IE6浮現在腦海。也許IE7也...

Answer 2

你不能禁用用戶滾動的能力，你只能禁用視覺助手（如滾動條）。如果您不想滾動，則必須將頁面寬度保持在瀏覽器窗口視口寬度以下。您可以通過基於視口大小流動和調整元素大小來實現這一點。

Answer 3

不幸的是，只有一種非CSS方法可以解決這個問題：您必須使用onscroll來阻止JavaScript的滾動。不要指望preventDefault()工作，雖然 - 你必須更有創意：

1. 使用scrollTo(0,0)
2. 或者
   • 防止所有箭頭/頁鍵輸入
   • 防止所有的鼠標滾輪輸入

查看關於另一個問題的答案：How to disable scrolling temporarily?。