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. B

Answer 1

Setting position to relative does not work for me. It only works if I set the position of body to fixed:

document.body.style.position = "fixed";
document.body.style.overflowY = "hidden";
document.body.addEventListener('touchstart', function(e){ e.preventDefault()});

Answer 2

This prevents scrolling on mobile devices but not the single click/tap.

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

Answer 3

Try adding

html {
  overflow-x: hidden;
}

as well as

body {
  overflow-x: hidden;
}

Answer 4

For future generations:

To prevent scrolling but keep the contextmenu, try

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

It still prevents way more than some might like, but for most browsers the only default behaviour prevented should be scrolling.

For a more sophisticated solution that allows for scrollable elements within the nonscrollable body and prevents rubberband, have a look at my answer over here:

https://stackoverflow.com/a/20250111/1431156

Answer 5

The CSS property touch-action may get you what you are looking for, though it may not work in all your target browsers.

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    touch-action: none;
}

Answer 6

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?