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

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

Solution 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?

Solution 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

Solution 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).

Solution 5

Try adding

html {
  overflow-x: hidden;
}

as well as

body {
  overflow-x: hidden;
}

View more solutions

Comments

[tibalt]

you understand, that you disable even vertical page scrolling with that, right?

[Chango]

Yeah, that's why it says that a smarter logic is needed to select when to prevent the scrolling.

[panzi]

I cannot use this, because this also prevents any HTML 5 contextmenu to be shown (supported by Firefox 20 for Android).

[StinkyCat]

overflow:hidden and width:100% both in body and html were sufficient. thks! (in iPhone!)

[James Duffy]

Read my answer. I said add it to the HTML tag, not just body.

[Jordan Sitkin]

is it just me or does this seem totally reckless?

[yaqoob]

on some mobile devices the scrolling gets disabled completely.

[Camilo Sanchez]

Agree with @daekano This answer Should be marked as the accepted answer. This worked for me also.

[user2840467]

Could anyone explain how the position:relative helps this work?

[Mathew]

I can't believe something as small as position: relative; was keeping it from working. Thanks!

[Artanis]

Chango - perfect solution! As I use custom scroll script on my mobile web-app, this piece of code finally solved all my issues at once!

[pfac]

Worked in iOS with Safari, but broke Chrome on Android. Tobl's answer worked perfectly for me.

[pfac]

Just tested this and worked perfectly with Safari on iOS, and both Chrome and Firefox on Android.

[evolutionxbox]

This also stops anything being scrolled inside the body. Even scrollable divs!

[user3304007]

After searching and trying for hours, only this approach worked for me. I can't tell how much I thank you mate, you saved my life!

[mateostabio]

It works but screws up the smooth scrolling that touch devices have... (I can't seem to push up and see the page scroll, it stops scrolling as soon as I release my finger)

[br4nnigan]

Current Chrome versions need this: document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });. Note that the objects becomes true thus event capturing is used.

[Ishamael]

Setting overflow for html is evidently necessary. Without it but with all the rest of the advices from this thread there was still some scrolling happening. Preventing events was not needed in my case.

[doublea]

For whatever reason this works on android devices but not on any IOS devices I try

[Mugen]

as mentioned by @brannigan in another comment, use window.addEventListener("touchmove", preventMotion, { passive: false });

[thomasrutter]

I wish I had stumbled upon your answer 24 hours earlier as it would have saved me a whole bunch of time only to arrive at the same conclusion. The height: 100% was the missing part of what I needed to make it all work. Because every child of body I used was position: absolute, it was giving the body element no set height.