How do I stop users from being able to scroll horizontally on my site

问题

Here's the site: 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.

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.

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

(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/

Any suggestions?

P.S. It behaves as it should on 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).

回答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.

回答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.

回答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.

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.

回答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.

回答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.

来源：https://stackoverflow.com/questions/13522787/how-do-i-stop-users-from-being-able-to-scroll-horizontally-on-my-site

标签

html

css

scroll

scrollbar

overflow