如何禁用网页上的水平滚动？

Question

如何禁用网页上的水平滚动？

我知道在stackoverflow（here, for example）之前已经多次询问过这个问题。

最常见的答案是使用CSS为html / body元素设置overflow-x: hidden;或max-width:100%。但是，这些似乎隐藏了滚动条，但仍然允许用户通过中间点击，触控板滑动和触摸屏滑动进行滚动。我正在寻找一种不允许水平滚动任何形式的解决方案。

下一个最常见的答案是，不要让您的内容比屏幕更宽。也许这是一个很好的答案，但总的来说它不是很有帮助，在我的特殊情况下，我不知道如何使我的内容适合。

是否有更好的方法可以防止水平滚动？

为了让您了解激发我的问题的问题，请查看http://www.tedsanders.com/BetTheBill/。为了让你能更好地看到问题，我用灰色突出显示了有问题的svg元素。当您点击绿色＆＃39; Bet The Bill＆＃39;按钮，svg旋转。如果您的窗口很小，灰色矩形的边角有时会指向屏幕并使水平滚动成为可能。

我已在当前​​版本的Chrome，Android Chrome，Firefox和IE11上测试了此问题。只有IE11才能提供我想要的行为，没有水平滚动。

修改：感谢您的有用答案，我现在有了解决方案。我很快就会实现它，但不幸的是，这意味着我上面的链接，最初是为了说明问题，将不再说明问题。对所有未来的访客抱歉！ （也许事后来说，我应该做一个小提琴。虽然谁知道这会持续多久......）

Edit2：请注意，下面的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解决方案不同，它甚至适用于移动设备。