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

Here's the site: http://joshnh.com/

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

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;在身体上隐藏溢出,但这不会阻止页面在用户使用触控板时水平滚动,或者单击并将鼠标拖动到右侧。

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.

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

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

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

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

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/

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

Any suggestions?

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

附:它在iOS上的行为应该如此。

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).

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

5 个解决方案

#1

I have fixed the issue by changing this:

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

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

To this:

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

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

溢出-x:隐藏;在导致问题的身体元素上。

#2

It looks like it's working to me. (No matter what I did to the page I didn't see a horizontal scrollbar.) I think overflow-x is the correct solution and that you shouldn't need JavaScript to do it. I would use html { overflow-x:hidden } but it looks like you're already doing that. The first thing I would do is validate the page at html5.validator.nu and fix the "two consecutive hyphens" errors.

看起来它对我有用。 (无论我对页面做了什么,我都没有看到水平滚动条。)我认为overflow-x是正确的解决方案,你不应该需要JavaScript来实现它。我会使用html {overflow-x:hidden},但看起来你已经在做了。我要做的第一件事是在html5.validator.nu验证页面并修复“连续两个连字符”错误。

#3

I didn't see a horizontal scroll bar but I was able to use the slide sideways feature on my mouse wheel and watched as the screen move. It looks like your main content element is set to a size that will fit on the screen, but the images in your header and section-title are continuing to repeat forever. I'm not sure how you are defining your css but it may be as simple as applying a width to your header in order to get it to stop.

我没有看到水平滚动条但我能够使用鼠标滚轮上的滑动侧面功能并观看屏幕移动。看起来您的主要内容元素设置为适合屏幕的大小,但标题和section-title中的图像将继续重复。我不确定你是如何定义你的CSS的,但它可能就像在标题中应用宽度以使其停止一样简单。

your <header class="clearfix" role="banner"> and <h1 class="section-title">About Me</h1> seem to be the culprits. Limiting their widths using css should resolve the issue.

你的

和

关于我 似乎是罪魁祸首。使用css限制其宽度应该可以解决问题。

#4

Suggestion 1

Apply a maximum width to the body. Something like this:

对身体施加最大宽度。像这样的东西:

body
{
    max-width:   100%;
    margin:    0 auto;
    overflow: visible;
}

I tested on Chrome and IE9, and the only issue I've noticed is the jumping.

我在Chrome和IE9上测试过,我注意到的唯一问题就是跳跃。

#5

What didn't work for you worked for me. I used the below code and it worked.

什么不适合你为我工作。我使用下面的代码,它工作。

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

When I tried:

当我尝试:

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

it didn't work.

它不起作用。