如何禁用網頁上的水平滾動？

Question

如何禁用網頁上的水平滾動？

我知道在stackoverflow之前已經多次詢問過這個問題（ 例如，這里 ）。

最常見的答案是使用CSS設置overflow-x: hidden; 或者max-width:100% html / body元素的max-width:100% 。 但是，這些似乎隱藏了滾動條，但仍然允許用戶通過中間點擊，觸控板滑動和觸摸屏滑動進行滾動。 我正在尋找一種不允許任何形式的水平滾動的解決方案。

下一個最常見的答案是不要讓你的內容比屏幕寬。 也許這是一個很好的答案，但總的來說它不是很有幫助，在我的特殊情況下，我不知道如何使我的內容適合。

是否有更好的方法來防止水平滾動？

為了讓您了解激發我的問題的問題，請查看http://www.tedsanders.com/BetTheBill/ 。 為了讓你能更好地看到問題，我用灰色突出顯示了有問題的svg元素。 當您單擊綠色的“Bet The Bill”按鈕時，svg會旋轉。 如果您的窗口很小，灰色矩形的角有時最終指向屏幕並使水平滾動成為可能。

我已經在當前版本的Chrome，Android Chrome，Firefox和IE11上測試了這個問題。 只有IE11提供了我想要的行為，沒有水平滾動。

編輯：感謝您的有用答案，我現在有了解決方案。 我很快就會實現它，但不幸的是，這意味着我上面的鏈接，原本是為了說明問題，將不再說明問題。 對所有未來的訪客抱歉！ （也許事后我應該做一個小提琴。雖然誰知道這會持續多久......）

編輯2：注意，下面的JavaScript解決方案不一定適用於移動瀏覽器（在我的Android Chrome版本中存在明顯的抖動）。

編輯3：啊哈！ 我的朋友告訴我overflow: hidden; 確實會工作，但它需要應用於父div而不是身體或html或其他祖先。 這看起來是最好的解決方案！

Answer 1

試試這個：

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%
}

我相信overflow-x: hidden; 只會停止滾動所應用的特定元素，因此外部更多元素仍然可以使窗口滾動。 將它應用於html和body應該防止超出窗口寬度和高度的任何東西導致窗口滾動。

添加width: 100%; 將強制html和body標簽正好是窗口寬度的100％。

---

但在你的例子中，這不是問題。 由於某種原因， <div class="container">有時會為容器顯示另一組滾動條，並且出現和消失的滾動條是導致容器移動的原因。

您可以通過添加以下內容來修復它：

/* overflow: hidden; stops the second set of scrollbars */
/* I increased the width by 300px and added 150px padding on either side. This stopped the grey background from disappearing when the pie chart rotated. */
.container {
    overflow: hidden;
    width: 930px;
    padding-left: 150px;
    padding-right: 150px;
}

Answer 2

    var offset = window.pageXOffset;
    $(window).scroll(function () {
        if(offset != window.pageXOffset)
            window.scrollTo(0, window.pageYOffset);
    });

另外別忘了隱藏溢出。

Answer 3

啊哈！ 我的朋友給了我一個答案，所以我回到這里為大家發帖。 overflow: hidden; 如果它適用於父div而不是body或html或其他祖先， 它確實會起作用。 與用戶3796431友情提供的javascript解決方案不同，它甚至適用於移動設備。