html - 如何阻止用户在我的网站上水平滚动

Question

这是网站:http://joshnh.com/

基本上，我有一些超宽的元素，这样它们看起来就好像是从屏幕的右侧出来的。然后我在 body 上使用 overflow-x: hidden; 来 overflow hidden ，但这并不会阻止页面在用户使用触控板或单击并拖动鼠标时水平滚动权利。

网站是流动的，所以设置overflow-x: hidden;没问题，但必须在body/html上设置 标签，而不是在内容包装器上，因为那样会破坏设计。

我也在使用这个 jQuery 片段来尝试帮助:

(function($) {
    $(window).scroll( function() {
        $(window).scrollLeft(0);
    });
})(jQuery);

我过去曾成功地使用过它，但我似乎无法让它在这种情况下工作。这是一个 jsFiddle，显示上面的代码片段在简化的测试用例中工作:http://jsfiddle.net/joshnh/pqpzN/

有什么建议吗？

附言它在 iOS 上的行为与应有的一样。

更新:我想我已经设法让那个 jQuery 片段停止通过触摸板水平滚动，但是点击和拖动仍然有效(我无法解释，因为测试用例也停止了点击和拖动，因为它应该是在我的网站上做)。

Answer 1

我已经通过更改此问题解决了这个问题:

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

对此:

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

导致问题的是 body 元素上的 overflow-x: hidden;。