2011-10-10 105 views
0

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

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

回答

2

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

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

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

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

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

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

+0

我不知道如何去做,但耐用性有第一優先級;)我試着用滾動條做一個問題的例子(http://imageshack.us/f/254/examplea .jpg /)..如果你有一個非常小的瀏覽器窗口並開始滾動,頂欄將保持在原來的位置(由於其他原因需要固定的位置),而內容將移動..這就是爲什麼我想到刪除滾動條功能,但我同意,由於可用性,它必須以更好的方式修復:) – donpedroper

0

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

0

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

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

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