DISABLE the Horizontal Scroll [closed]

Answer 1

Try adding this to your CSS

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

Answer 2

Koala_dev's answer will work, but in case you are wondering this is the reason why it works:

.
q.html, body {              <--applying this css block to everything in the
                             html code.

q.max-width: 100%;          <--all items created must not exceed 100% of the 
                             users screen size. (no items can be off the page 
                             requiring scroll)

q.overflow-x: hidden;       <--anything that occurs off the X axis of the 
                             page is hidden, so that you wont see it going 
                             off the page.     

.

Answer 3

You can try this all of method in our html page..

1st way

body { overflow-x:hidden; }

2nd way You can use the following in your CSS body tag:

overflow-y: scroll; overflow-x: hidden;

That will remove your scrollbar.

3rd way

body { min-width: 1167px; }

5th way

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

6th way

element { max-width: 100vw; overflow-x: hidden; }

4th way..

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

Now i m searching about more..!!!!

Answer 4

If you want to disable horizontal scrolling over the entire screen width, use this code.

element {
  max-width: 100vw;
  overflow-x: hidden;
}

This works better than "100%" because it ignores the parent width and instead uses the viewport.

Answer 5

koala_dev answered that this will work:

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

And MarkWPiper comments that ":-/ Caused touch / momentum scrolling to stop working on iPhone"

The solution to keep touch / momentum on iPhone is to add this line inside the css block for html,body:

    height:auto!important;

Answer 6

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }

You apply the above style or you can create function in javaScript to solve that problem