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?

Answer 3

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 4

I suspect most everyone really wants to disable zoom/scroll in order to put together a more app-like experience; because the answers seem to contain elements of solutions for both zooming and scrolling, but nobody's really nailed either one down.

Scrolling

To answer OP, the only thing you seem to need to do to disable scrolling is intercept the window's scroll and touchmove events and call preventDefault and stopPropagation on the events they generate; like so

window.addEventListener("scroll", preventMotion, false);
window.addEventListener("touchmove", preventMotion, false);

function preventMotion(event)
{
    window.scrollTo(0, 0);
    event.preventDefault();
    event.stopPropagation();
}

And in your stylesheet, make sure your body and html tags include the following:

html:
{
    overflow: hidden;
}

body
{
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

Zooming

However, scrolling is one thing, but you probably want to disable zoom as well. Which you do with the meta tag in your markup:

<meta name="viewport" content="user-scalable=no" />

All of these put together give you an app-like experience, probably a best fit for canvas.

(Be wary of the advice of some to add attributes like initial-scale and width to the meta tag if you're using a canvas, because canvasses scale their contents, unlike block elements, and you'll wind up with an ugly canvas, more often than not).

Answer 5

Try adding

html {
  overflow-x: hidden;
}

as well as

body {
  overflow-x: hidden;
}

Answer 6

use this in style

body
{
overflow:hidden;
width:100%;
}

Use this in head tag

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Answer 7

In page header, add

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-sacle=1, maximum-scale=1, user-scalable=no">

In page stylesheet, add

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

It is both html and body!

Answer 8

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 9

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 10

This works for me:

window.addEventListener("touchstart", function(event){
             if(event.target.tagName=="HTML" || event.target.tagName=="BODY"){
                     event.preventDefault();
             }
} ,false);

It does not work 100% and I also added this:

window.addEventListener("scroll",function(){
    window.scrollTo(0,0)
},false)

Answer 11

After having no success trying all the answers I managed to turn my mobile scroll off by simply adding:

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

body {
  position: relative;
}

Its important to use % not vh for this. The height: 100% was something I had been missing all along, crazy.

Answer 12

The simplest way which is pretty much straight forward with only CSS Codes:

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

Answer 13

For Apple devices position: relative does not work. The following code works on all devices:

html, body {
  overflow: hidden;
  position: fixed;
}

Answer 14

I'm late to the party, but I'm adding this answer because none of the other things I tried worked in my specific situation. No combination of capturing touchmove, scroll etc events had any effect, and position: relative on body made everything disappear.

I found that I had to add height: 100% on the HTML and BODY elements. It's possible that not all of the following rules are required, but it took me long enough to stumble upon this magic combination and it appears to work.

html {
    height: 100%;
    overflow: hidden;
}
body{
    margin: 0;
    overflow: hidden;
    height: 100%;
    position: relative;
}

In addition to this I also had the following in the HTML head:

<meta name="viewport" content="width=device-width, initial-scale=1">

My app made heavy use of absolutely position elements, some of which were partially off-screen at different times as they slid out of view. As a result, the body element had no content in it to give the body any area/size.

I found that the "scrolling" that was happening on mobile devices was a result of the browser not knowing the extent of the page's size in order to do its viewport (scaling to device-width) calculation. It seems that the body having 0px height was failing to convey to the browser either the height or width of the page, so setting the height of body to 100% was key in the solution.

Edit: looking at the answers again after finding my solution, I realise the other answer by "Toms Codery" is essentially the same solution as mine, albeit his is only in the x-direction.

Answer 15

The following works for me, although I did not test every single device there is to test :-)

$('body, html').css('overflow-y', 'hidden');
$('html, body').animate({
    scrollTop:0
}, 0);

Answer 16

这样可以防止在移动设备上滚动，但不能单击/单击。

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