當overflow-x被隱藏時，是否可以防止水平滾動？

我有一個網頁，其內容超出了瀏覽器窗口的右邊緣。我在<body>上設置了overflow-x: hidden來關閉底部滾動條，但我仍然可以使用觸控板水平滾動，這不是我想要的。當overflow-x被隱藏時，是否可以防止水平滾動？

有什麼辦法可以防止瀏覽器水平滾動嗎？

附註：Safari 4.0.4有時只能水平滾動，而滾動感覺「粘性」和「跳動」，而Firefox總是平滑地水平滾動。

2010-04-15 Andrew LeClair

你可以嘗試在CSS設置：

html{ 
    overflow-x: hidden; 
}

，而不是使用body選擇。我嘗試過，並在Firefox中工作。

來源

2010-04-15 20:12:17

我也在FF中試過這個，它似乎有完全相同的問題。 @Chaulky指出，更好的解決方案是簡單地將顯示設置爲「無」。如果你想這個出現，做一些js/jquery再次移動它。 – Automatico 2012-07-08 16:37:58

如果一切都失敗了，你可以使用Javascript來不斷強制瀏覽器使用window.scrollTo（xpos，ypos）滾動到左邊。對於xpos，你會希望使用0和ypos，假設你想允許垂直滾動，你需要獲得用戶當前的滾動位置。

您可以將函數調用放在window.onscroll事件處理函數中，也可以在每100毫秒左右運行一次的JavaScript間隔中進行。由你決定。如果您需要代碼示例，請詢問。

來源

2010-04-16 17:13:50 InvisibleBacon

爲了防止滾動，可以使用'overflow：hidden'，'window.onscroll'和'window.scrollTo'的組合來隱藏滾動條，並將用戶指向0,0（左上角屏幕），有效地保持網頁在當前位置（或ypos作爲用戶的當前滾動位置以保持垂直滾動，如@InvisibleBacon建議） – Seagrass 2013-09-19 21:15:23

如果你有一個例子，這將更好地理解。

這是一個很長的URL或沒有空格的東西？你有沒有在元素上設置white-space:nowrap;？

如果你有一個定義的大小（一個適合於視）的容器，文本應該正確地堅持，（除非它是不帶空格的長行）

來源

2010-04-17 05:17:49

我認爲真正的問題是，爲什麼你的內容是否超出了頁面的預期大小？這是不希望用戶真正看到的內容嗎？在這種情況下，將其放在某個div的某個位置並將其設置爲none。這將完全避免溢出問題。

如果存在導致容器溢出的合法原因，請明確設置容器的大小，然後將overflow-x隱藏起來。我沒有測試過，但是這應該可以防止目前的行爲。如果不是，請嘗試使用div而不是body標籤。瀏覽器可能會奇怪地行事，因爲它正在處理body標籤本身。

來源

2010-04-17 16:09:44 Chaulky

我會進入Chrome並在桌面上打開開發人員工具。刪除overflow-x屬性。然後繼續刪除頁面上的每個父元素。當你看到水平滾動條消失時，你知道你發現了你的問題。然後深入該元素。我敢打賭，你的寬度是100％，而不是保證金。如果是這種情況，請刪除保證金。

來源

2013-05-10 16:16:56

舊的討論，但它可以用於尋找正確答案的人！

在比瀏覽器窗口更寬的元素的父div上設置「overflow：hidden」（不像html或body那樣），這將停止使用de pad或箭頭鍵的滾動。

來源

2013-06-01 23:26:04 Clauce

當overflow-x被隱藏時，是否可以防止水平滾動？

回答

相關問題