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

Rumph

refer this to disable scrolling : #2528399 – Gable

That link is more for app developers using android webview – Amiraamis

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.

Lewak

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

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

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

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) – Counterreply

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

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?

Eductive

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

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

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

is it just me or does this seem totally reckless? – Toritorie

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! – Noto

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

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

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://mcmap.net/q/57358/-how-to-disable-rubber-band-in-ios-web-apps

Superfetation

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

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. – Latashialatch

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

Lyric

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! – Bankrupt

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. – Any

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

Confirmed working on Android just now, but only with the above modification: window.addEventListener("touchmove", preventMotion, { passive: false }); – Rack

Answer 5

Try adding

html {
  overflow-x: hidden;
}

as well as

body {
  overflow-x: hidden;
}

Gravitate

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

on some mobile devices the scrolling gets disabled completely. – Alexipharmic

Answer 6

In page header, add

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=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!

Forestall

Answer 7

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" />

Studied

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

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;
}

Wendiwendie

Answer 9

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.

Holds

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. – Contrast

Answer 10

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()});

Knight

Answer 11

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)

Humanitarian

Answer 12

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

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

Trapezoid

Answer 13

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.

Contrast

Answer 14

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

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

Hierodule

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);

Burgonet