Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 810
joshnh Avatar asked Nov 23 '12 03:11

joshnh


1 Answers

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.

like image 140
joshnh Avatar answered Oct 15 '22 10:10

joshnh