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

Question

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

基本上,我有一些超宽的元素,使它们看起来好像是从屏幕的右侧出来.然后我overflow-x: hidden;在身体上使用隐藏溢出,但这并不会阻止页面在用户使用触控板时水平滚动,或者单击并将鼠标拖动到右侧.

该站点是流动的,因此设置overflow-x: hidden;不是问题,但必须在body/ html标签上设置,而不是在内容包装器上设置,因为这会破坏设计.

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

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

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

有什么建议？

PS它在iOS上的行为应该如此.

更新:我想我已经设法让jQuery片段通过触摸板停止水平滚动,但点击和拖动仍然有效(我无法解释,因为测试用例停止点击和拖动,因为它应该在我的现场).

Answer 1

我通过更改此问题来解决此问题:

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

对此:

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

它是overflow-x: hidden;导致问题的身体元素.