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 can I implement this dual-gradient menu design?

    How to I change this css psuedo button in Javascript/Jquery

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?

    How to make this layout more responsive in CSS?

    how do you center and left align columns, at the same time, in bootstrap or regular html5?

    how to make a custom scroll bar with css

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    Only show wordpress featured image when shared on social media

    How to target the chrome browser for Mac only?

    How to make a table scrollable with fixed header?

    how the rises up and down button is made?

    How to toggle div and up-down arrow heads using css only

    How to detect clicks outside of a css modal? [duplicate]

    How do I link to top of a section on the page minus the height of a fixed nav-bar?

    How to break a table with CSS diagonally or vertically?

    How to display only the first few lines of a div (clamping)?

    how to currency convert in java script

    How to apply disabled style of ASP.net dropdownlist

    how can i center the footer text in the bottom of the page regardless of screen size

    How can I fix my CSS/HTML that uses input:checked, to prevent radio button movement?

    how to make input and select look nice beside eachother with custom height?

    How to position a drop down list nav bar inside header in html css

    on hover and on click how to fade out image and fade in content text

    How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css

    How to override facebook share button css

    How to open a CSS-only popup automatically on page load/using Javascript?

    How to attach a CSS stylesheet to FXML?

    How to center SVG within its container?

    How to indent multiple levels of select optgroup with CSS?

    Panel in Horizontal List item showing behind Button