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

refer this to disable scrolling : http://stackoverflow.com/questions/2527899/disable-scrolling-in-webview — Ponmalar, May 15 '12 at 04:37

zeek · Accepted Answer · 2018-01-18T16:26:15.640

133

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.

edited Jan 18 '18 at 16:26

answered Jun 24 '14 at 16:54

zeek

1,362
2
9
3

1

Agree with @daekano This answer Should be marked as the accepted answer. This worked for me also. – Camilo Sanchez Jul 27 '15 at 21:15
4

Could anyone explain how the position:relative helps this work? – user2840467 Aug 03 '15 at 17:02
4

I can't believe something as small as position: relative; was keeping it from working. Thanks! – Mathew Aug 25 '15 at 06:40
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) – mateostabio Sep 13 '17 at 01:31
1

For whatever reason this works on android devices but not on any IOS devices I try – doublea Feb 14 '19 at 16:10

score 33 · Answer 2 · edited May 23 '17 at 11:47

33

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?

edited May 23 '17 at 11:47

Community

1
1

answered May 24 '12 at 14:03

Chango

6,754
1
28
37

5

you understand, that you disable even vertical page scrolling with that, right? – tibalt Nov 11 '12 at 15:58
5

Yeah, that's why it says that `a smarter logic is needed to select when to prevent the scrolling`. – Chango Nov 11 '12 at 16:11
1

I cannot use this, because this also prevents any HTML 5 `contextmenu` to be shown (supported by Firefox 20 for Android). – panzi Mar 31 '13 at 18:56
4

is it just me or does this seem totally reckless? – Jordan Sitkin Nov 06 '14 at 00:14
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! – Artanis Oct 10 '15 at 23:13
Worked in iOS with Safari, but broke Chrome on Android. [Tobl](http://stackoverflow.com/users/1431156/tobl)'s [answer](http://stackoverflow.com/a/20217475/664321) worked perfectly for me. – pfac Nov 25 '15 at 15:55
This also stops anything being scrolled inside the body. Even scrollable divs! – evolutionxbox Mar 16 '16 at 12:19

score 24 · Answer 3 · edited May 23 '17 at 12:34

24

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

edited May 23 '17 at 12:34

Community

1
1

answered Nov 26 '13 at 12:45

Tobl

671
5
17

Just tested this and worked perfectly with Safari on iOS, and both Chrome and Firefox on Android. – pfac Nov 25 '15 at 15:56
4

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. – br4nnigan Jan 18 '18 at 10:51

score 19 · Answer 4 · answered Feb 03 '16 at 07:43

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

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! — user3304007, Dec 05 '16 at 08:28
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. — Ishamael, Jun 06 '18 at 01:17
as mentioned by @brannigan in another comment, use `window.addEventListener("touchmove", preventMotion, { passive: false });` — Mugen, Oct 13 '19 at 11:25
Confirmed working on Android just now, but only with the above modification: window.addEventListener("touchmove", preventMotion, { passive: false }); — Dino Dini, Oct 04 '22 at 00:06

score 14 · Answer 5 · answered Oct 21 '13 at 14:06

14

Try adding

html {
  overflow-x: hidden;
}

as well as

body {
  overflow-x: hidden;
}

answered Oct 21 '13 at 14:06

James Duffy

1,387
8
16

2

Read my answer. I said add it to the HTML tag, not just body. – James Duffy May 23 '14 at 23:10
1

on some mobile devices the scrolling gets disabled completely. – yaqoob May 07 '15 at 04:25

score 9 · Answer 6 · edited Oct 29 '21 at 01:54

9

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!

edited Oct 29 '21 at 01:54

Brad

159,648
54
349
530

answered Oct 05 '15 at 19:15

Downhillski

2,555
2
27
39

score 8 · Answer 7 · answered May 15 '12 at 06:25

8

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

answered May 15 '12 at 06:25

cgvector

931
1
10
13

1

overflow:hidden and width:100% both in body and html were sufficient. thks! (in iPhone!) – StinkyCat Feb 24 '14 at 11:37

score 4 · Answer 8 · answered Jun 13 '19 at 18:20

4

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

answered Jun 13 '19 at 18:20

sirbrialliance

3,612
1
25
15

score 3 · Answer 9 · answered Aug 08 '20 at 12:22

3

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.

answered Aug 08 '20 at 12:22

Toms Code

1,439
3
15
34

1

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. – thomasrutter Jul 29 '21 at 03:15

score 3 · Answer 10 · answered Nov 14 '20 at 01:02

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

bernard · Answer 11 · 2013-10-29T23:14:51.193

2

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)

edited Oct 29 '13 at 23:14

answered Oct 29 '13 at 22:40

bernard

306
1
8

score 1 · Answer 12 · answered Jun 02 '21 at 05:08

1

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

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

answered Jun 02 '21 at 05:08

Asher Memon

62
1
11

thomasrutter · Answer 13 · 2021-07-29T03:15:32.160

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.

score 0 · Answer 14 · answered Feb 22 '21 at 22:08

0

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

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

answered Feb 22 '21 at 22:08

Edris Ranjbar

19
5

score -2 · Answer 15 · edited Jul 19 '18 at 06:13

-2

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

edited Jul 19 '18 at 06:13

Soviut

88,194
49
192
260

answered Aug 31 '15 at 13:55

Hlawuleka MAS

550
5
11

Disable scrolling in all mobile devices

15 Answers15

Scrolling

Zooming

Linked

Related