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

这是网站： 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/

有什么建议么？

附：它在iOS上的行为.

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

解决方法

我修改了这个问题：

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

为此：

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

它是overflow-x：hidden;在造成问题的身体元素上.

原文地址：https://www.jb51.cc/html/230662.html