Preventing x scroll on web mobile browser

Question

I run my browser on mobile and what I get on one page , is a huge y scroll to the right. So I used this:

   body{
    overflow-y: scroll !important;    
       overflow-x: hidden !important;
    }

That didnt help, and when I run the site on the browser..such an effect doesnt happen. Is there any way to disable y scrolling? perhaps that will also be suitable on the browser for the mobile!?

Answer 1

You want to disable y scrolling and you are disabling x here

html, body {  /*You probably wont need !important too */
   overflow-y: hidden !important;    
   overflow-x: auto !important; /*Or you can use scroll value as well*/
}

Example

Note: If you are disabling your scroll, users wont be able to scroll vertically at all..content overflowed out of the viewport will be hidden