How do you disable horizontal scrolling on a webpage?


Tags: javascript,html,css

Problem :

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!



Solution :

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.


    CSS Howto..

    How to animate a height change using javascript and css?

    CSS: How to set image width larger than the container's [closed]

    How can I vertically centre bullets that bracket headers

    How can I use CSS to preserve line breaks in an HTML block?

    Glide.js, how to check size of image?

    How to select not first tr and not last td

    How to add CSS class to asp.net from code behind [closed]

    select tag in Google Chrome shows lowercase options

    How to set dynamic value in css? [closed]

    How to make a themeable web application using CSS?

    How to select a css class as selected dynamically in mvc

    How do I get the codes of creating the sidebar from this website? [closed]

    How to break a table with CSS diagonally or vertically?

    How to build a CSS style with a LESS mixin parameter?

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    How to write a structured HTML/CSS?

    Google font - how to specific font-family If they have the same name?

    How to upload image to an existing image src in angularjs, css

    how to make vertical progress path using css

    How do I configure syntax highlighting for LESS in coda?

    How to make table have same width as container?

    How to expand vertically web's body when open menu

    simplest slideshow using html, css toggling visibility of each div tag

    How to avoid orphaned headings in CSS columns?

    Angular 2: How to change an element’s CSS class onclick and to remove all others (Plnkr)

    How to auto adjust menus height according to container height

    How to add multiple CSS styles to an element with .css()

    How is `outline: inherit 0` interpreted?

    How Do I Add CSS Class to body Element in Meteor?

    How do I remove the white line under the nav bar