3

How do you disable horizontal scrolling on a webpage?

I understand that this question has been asked many times before on stackoverflow (here, for example).

The most common answer says use CSS to set overflow-x: hidden; or max-width:100% for the html/body elements. However, these seem to hide the scrollbar but still allow the user to scroll with middle clicks, trackpad swiping, and touchscreen swiping. I'm looking for a solution that allows NO horizontal scrolling of any form.

The next most common answer says don't make your content wider than the screen. Maybe this is a good answer, but in general it's not very helpful and in my particular situation I don't know how to make my content fit.

Are there better methods for preventing horizontal scrolling?

To give you an idea of the problem that's motivating my question, take a look at http://www.tedsanders.com/BetTheBill/. So that you can see the problem better, I have highlighted the offending svg element in gray. When you click the green 'Bet The Bill' button, the svg rotates. If your window is small, the corners of the gray rectangle sometimes end up pointing off the screen and make horizontal scrolling possible.

I've tested this issue on the current versions of Chrome, Android Chrome, Firefox, and IE11. Only IE11 gives the behavior I want, with no horizontal scrolling.

Edit: Thanks to your helpful answers, I now have a solution. I'm going to implement it soon, but unfortunately that means my link above, originally meant to illustrate the problem, will no longer illustrate the problem. Sorry to all future visitors! (Perhaps in hindsight I should have made a fiddle. Although who knows how long that will even last...)

Edit2: Beware, the javascript solution below does not necessarily work on mobile browsers (in my version of Android Chrome there is significant jitter).

Edit3: Aha! My friend told me that overflow: hidden; will indeed work, but it needs to applied to the parent div and not the body or html or another ancestor. This looks like the best solution!

Community
  • 1
  • 1
Ted
  • 49
  • 1
  • 7
  • have a question here why you using specific height and width for SVG ? – Kheema Pandey Jul 07 '14 at 04:30
  • Actually, I am not using a specific height and width for the SVG element. I set the SVG width and height attributes to equal `document.getElementById('pie-chart').offsetWidth`. If you resize the window below about 600 pixels and refresh, you'll see that the SVG changes size. (In the future, I plan to have the SVG automatically resize on window resizes, but I haven't gotten to it yet.) – Ted Jul 07 '14 at 05:00
  • And what happens when you resize your browser and refresh it again, still you see a scrollbar? I am asking in FF v.30 I cannot see any scrolling.. You problem would be solved as soon as you'll make your SVG responsive. – Kheema Pandey Jul 07 '14 at 05:05
  • I have `overflow-x: hidden` set, so I don't see a horizontal scrollbar. However, I can still scroll horizontally by middle click, trackpad, or touchscreen. Could you clarify how I could make my svg responsive? The problem is that the svg rotates, and the corners of its rectangle stick of the screen. I don't want its contents to shrink though. – Ted Jul 07 '14 at 05:13

3 Answers3

4

Try this:

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

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

I believe overflow-x: hidden; will only stop the particular element that it is applied to from scrolling, so outer-more elements can still cause the window to scroll. Applying it to html and body should prevent anything which exceeds the width and height of window from causing the window to scroll.

Adding width: 100%; will force the html and body tags to be exactly 100% the width of the window.

But in your example that's not the problem. For some reason the <div class="container"> sometimes displays another set of scrollbars just for the container and the scrollbars appearing and disappearing is what causes the container's movement.

Overflow

You can fix it by adding to following:

/* overflow: hidden; stops the second set of scrollbars */
/* I increased the width by 300px and added 150px padding on either side. This stopped the grey background from disappearing when the pie chart rotated. */
.container {
    overflow: hidden;
    width: 930px;
    padding-left: 150px;
    padding-right: 150px;
}
Bentley Carr
  • 672
  • 1
  • 8
  • 24
  • Sorry that my question wasn't clearer. Even when `overflow-x:hidden` is applied to the html and body tags (as it is on my webpage), you can still scroll horizontally after rotating another element off the screen. This solution doesn't work unfortunately. (You can give it a try by going to http://www.tedsanders.com/BetTheBill, resizing the page to a width of around 600 pixels or less, and then clicking the green 'Bet The Bill' button. You'll see that you can still scroll right. And the very top of my CSS has the overflow-x lines: http://www.tedsanders.com/BetTheBill/bet-the-bill/styles.css) – Ted Jul 07 '14 at 04:53
  • Have you tried adding `width: 100%;` to them? (I just updated my answer a second ago) – Bentley Carr Jul 07 '14 at 04:54
  • I also have `max-width:100%` set for them, but I can try `width:100%` too. ...Nope, doesn't work even with all three properties set. – Ted Jul 07 '14 at 04:57
  • Correct. That's the project I'm working on where I'm running into this problem. (It only shows up when the window is smaller than ~600 pixels.) Edit: Oops, looks like your comment disappeared. Should I delete mine too? – Ted Jul 07 '14 at 05:07
  • I think it's because you have two scrollbars for some reason. See https://imageshack.com/i/nm9jpqp – Bentley Carr Jul 07 '14 at 05:09
  • Interesting, I don't see two scrollbars on my versions of Chrome, Firefox, or IE11. What browser are you using? – Ted Jul 07 '14 at 05:12
  • If you add `overflow: hidden;` to `
    ` then the grey background of the pie chart disappears behind the end of the 630px but the double scrollbars and disappears.
     – Bentley Carr Jul 07 '14 at 05:13
  • I'm using Chrome. It happens when I make my window about 1330 pixels wide and zoom out to 67%. – Bentley Carr Jul 07 '14 at 05:14
  • You can fix it by making the container 830px wide (200px more than before) and having the containers `padding-left` and `padding-right` set to 100px. Also, add `overflow-y: hidden` to the container. – Bentley Carr Jul 07 '14 at 05:19
  • Here are screenshots of IE11, Chrome, and Firefox on my desktop: http://imgur.com/522RV8u. They are all about 500 pixels wide. I'll try 1330 now, thanks. – Ted Jul 07 '14 at 05:19
  • Do you still see two scrollbars? I wonder if they appeared while I briefly tried the `width:100%` solution you mentioned. Or perhaps they are related to the `margin:-600` I set when experimenting with different solutions. – Ted Jul 07 '14 at 05:22
  • I reloaded the page and you seemed to have fixed it. – Bentley Carr Jul 07 '14 at 05:24
  • 1
    Ah, then I bet it was from when I briefly tried setting `width:100%`. Thanks for noticing and sorry to have wasted your time with that. I appreciate your help. :) – Ted Jul 07 '14 at 05:26
1
    var offset = window.pageXOffset;
    $(window).scroll(function () {
        if(offset != window.pageXOffset)
            window.scrollTo(0, window.pageYOffset);
    });

Also do not forget to hide overflow.

iamawebgeek
  • 2,713
  • 1
  • 18
  • 34
  • I pasted your code snippet in, and it works like a charm, with no jitter. Thanks very much for sharing your time and expertise! – Ted Jul 07 '14 at 05:06
  • Unfortunately, I just noticed this fix does not work on my phone, a Galaxy S4 with Android Chrome. Trying to scroll to the right results in lots of jitter. I will keep searching for solutions :) – Ted Jul 12 '14 at 19:29
1

Aha! My friend gave me an answer so I came back here to post it for all of you. overflow: hidden; will indeed work, if it is applied to the parent div and not the body or html or another ancestor. And unlike the javascript solution kindly provided by user3796431, it even works on mobile.

Ted
  • 49
  • 1
  • 7