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

这是网站：http://joshnh.com/ 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/ http://jsfiddle.net/joshnh/pqpzN/

有什么建议么？

附：它的行为与 iOS 上应有的行为相同。

更新：我想我已经设法让 jQuery 片段通过触摸板停止水平滚动，但单击和拖动仍然有效（我无法解释，因为测试用例也停止单击和拖动，因为它应该在我的设备上执行）地点）。

我通过更改以下内容解决了该问题：

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

To this:

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

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