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

Question

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

@Passerby Doing that would directly impact on the design of the site, so unfortunately that isn't an option. — joshnh, Nov 23 '12 at 03:54
in demo I can't scroll, when draggin by mouse it is funny bounce, but not more — zb', Nov 23 '12 at 04:52
@eicto What OS/browser are you using? That is essentially the behaviour I want, but without the bouncing. — joshnh, Nov 26 '12 at 04:07
Maybe users use their trackpad or click and drag their mouse because they want to see whatever does not fit into their browser window ... — O. R. Mapper, Nov 27 '12 at 22:21
@O.R.Mapper The site is 100% fluid (i.e. there is no content outside of the viewport's width, and it never needs to be horizontally scrolled). — joshnh, Nov 27 '12 at 22:56

score 11 · Accepted Answer · answered Nov 27 '12 at 22:15

11

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.

answered Nov 27 '12 at 22:15

joshnh

8,374
4
35
53

this is the most practical way of disallowing right-left scrolling. Do you get your own bounty? :) – J.Wells Dec 02 '12 at 04:02
I have no idea. I guess we will find out! – joshnh Dec 02 '12 at 10:14
@J.Wells You do not get your own bounty. – joshnh Dec 04 '12 at 01:57
Were you able to accept your own answer? That kinda makes sense, but sucks. – J.Wells Dec 04 '12 at 02:32
Accept, as in mark it as correct, but not assign it the bounty. – joshnh Dec 04 '12 at 02:57

score 0 · Answer 2 · answered Nov 23 '12 at 03:53

0

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.

answered Nov 23 '12 at 03:53

ryanve

50,076
30
102
137

I'm not talking about the scrollbar, I'm talking about being able to scroll in some circumstances, despite the lack of a scrollbar. – joshnh Nov 26 '12 at 01:19
@joshnh Ok I think I understand but I don't have a device on which I can duplicate it. Does adding `position:absolute` or `position:fixed` to the element in question have any effect? – ryanve Nov 26 '12 at 03:30
Unfortunately not. I think I have managed to stop horizontal scrolling on touchpads, but clicking and dragging still works. – joshnh Nov 26 '12 at 03:59
@joshnh Maybe you can disable the drag event with something like: http://jsfiddle.net/Xv6xE/5/ – ryanve Nov 26 '12 at 04:32
@joshnh I guess the drag events ( http://www.html5rocks.com/en/tutorials/dnd/basics/ ) only apply to elements that have the "draggable" attribute. Maybe there's a different mouse event that would solve it: https://developer.mozilla.org/en-US/docs/Mozilla_event_reference – ryanve Nov 26 '12 at 05:00
The reduced test case I linked to in my original question has the desired behavior, and what I believe you are trying to replicate using another method, but for some reason it doesn't work on my site. I cannot figure out why for the life of me; I've used it successfully on other sites. – joshnh Nov 26 '12 at 05:14

Moro · Answer 3 · 2012-11-23T04:48:30.420

0

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.

edited Nov 23 '12 at 04:48

answered Nov 23 '12 at 04:04

Moro

49
3

That's not the issue unfortunately. There are no images in the header of section-title, just an arbitrarily large width. The body element cuts this off using overflow-x: hidden; but for some reason, you can still scroll using other techniques... – joshnh Nov 23 '12 at 05:23
if you use chrome and inspect elements on your blue and red color box elements chrome shows that they extend farther than expected. It may be that you just need to constrain the width of these elements with css. – Moro Nov 23 '12 at 05:33
1

That isn't the problem here (they don't actually extend farther than expected, that is intentional). Overflow-x: hidden; should deal with that. For some reason, in this particular instance, it isn't, and I'd like to know why. – joshnh Nov 23 '12 at 22:55

score 0 · Answer 4 · edited Nov 27 '12 at 22:15

0

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.

edited Nov 27 '12 at 22:15

joshnh

8,374
4
35
53

answered Nov 27 '12 at 16:41

222

1,257
2
8
4

This does seem to work. Any ideas as to why this is required to get what should otherwise be expected behavior? – joshnh Nov 27 '12 at 22:09
Actually, simply removing overflow-x: hidden; and width: 100%; from the body element has fixed the issue. Thanks anyway! – joshnh Nov 27 '12 at 22:13
Not at all. Your answer instructed me to apply a maximum width, something that I was already using. – joshnh Nov 30 '12 at 22:37
Let me put it this way: I know why this happened, and this was one of my ideas for a fix (which worked). Do you know why this happened? (Really, if you do, I will remove all of my posting from this page and up-vote your answer) – 222 Nov 30 '12 at 22:58
Let me ask you that if you know what happened, and why, why haven't you explained it?! Please go ahead... – joshnh Dec 01 '12 at 01:08
Great answer... but I asked first. – 222 Dec 03 '12 at 13:16
If I knew, do you think I would have asked this question in the first place? Now please, share your thoughts with us. – joshnh Dec 03 '12 at 21:51

score 0 · Answer 5 · answered Mar 31 '15 at 15:28

0

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.

answered Mar 31 '15 at 15:28

Nathan Quackenboss

17
5

can you elaborate on your answer just a bit more thanks – MZaragoza Mar 31 '15 at 15:48

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

5 Answers5

Suggestion 1

Linked