如何阻止用户在我的网站上水平滚动 [英] How do I stop users from being able to scroll horizontally on my site

问题描述

以下是网站： http://joshnh.com/

基本上，我有一些超宽的元素，所以他们看起来好像是从屏幕的右手边出来。然后我在主体上使用 overflow-x：hidden; 隐藏溢出，但是当用户使用他们的触控板时，不会停止页面水平滚动，

Basically, I have a few elements that are super wide so that they look as though they are coming out from the right hand side of the screen. I'm then using overflow-x: hidden; on the body to hide the overflow, but that doesn't stop the page from horizontally scrolling when users use their trackpad, or click and drag their mouse to the right.

网站是流动的，因此设置 overflow-x：hidden; 是不是一个问题，但它必须设置在正文 / html 标记，而不是在内容封装，因为这将会破坏设计。

The site is fluid, so setting overflow-x: hidden; isn't a problem, but it has to be set on the body/html tags, not on the content wrapper, as that would ruin the design.

我也使用这个jQuery代码段尝试和帮助：

I'm also using this jQuery snippet to try and help:

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

我已经成功使用过，但我似乎无法使用它在这种情况下。下面是一个jsFiddle显示上述代码段在减少的测试用例中工作： http://jsfiddle.net/joshnh/pqpzN/

I've used that successfully in the past, but I can't seem to get it to work in this case. Here is a jsFiddle showing the above snippet working in a reduced test case: http://jsfiddle.net/joshnh/pqpzN/

有任何建议吗？

它的行为应该在iOS上。

P.S. It behaves as it should on iOS.

更新：我想我已经设法得到的jQuery片段停止通过触摸板水平滚动，但点击和拖动仍然工作我不能解释，因为测试用例停止点击和拖动，因为它应该在我的网站上）。

UPDATE: I think I have managed to get that jQuery snippet to stop horizontal scrolling via touchpads, but clicking and dragging still works (which I can't explain, as the test case stops clicking and dragging too, as it should be doing on my site).

推荐答案

我已经通过改变这个问题解决了这个问题：

I have fixed the issue by changing this:

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

到此：

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

overflow-x：hidden; code>在引起问题的主体元素上。

It was overflow-x: hidden; on the body element that was causing the problem.

这篇关于如何阻止用户在我的网站上水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！