Question

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

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