Disable scrolling in all mobile devices

Question

This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this:

body{    overflow-x:hidden  // disable horizontal scrolling. } 

This may be relevant information: I also have this in my head tag, because I also do not wish the user to be able to zoom:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> <meta name="viewport" content="width=device-width" /> 

Thanks

Answer 1

html, body {   overflow-x: hidden; } body {   position: relative; } 

The position relative is important, and i just stumbled about it. Could not make it work without it.

Answer 2

cgvector answer didn't work for me, but this did:

document.body.addEventListener('touchstart', function(e){ e.preventDefault(); }); 

I wouldn't leave it just like that, a smarter logic is needed to select when to prevent the scrolling, but this is a good start.

Taken from here: Disable scrolling in an iPhone web application?