Prevent page scroll

Question

I need to prevent page scroll, so I add the following style to body:

overflow: hidden;

This works on desktop. On mobile it has no affect.

After reading this a solution appears to be either adding a child div of body and adding a fixed position.

This works but causes the page to jump to the top if you fix the page when you are half way down the page.

How can I prevent scrolling on mobile without having the page jump to the top?

Have a look at http://stackoverflow.com/questions/10592411/disable-scrolling-in-all-mobile-devices — Gavin Bruce, Sep 20 '15 at 16:03

score 2 · Accepted Answer · answered Sep 20 '15 at 17:32

HTML Solution:

// disable scrolling and scaling on mobile devices
<meta name="viewport" content="width=device-width, user-scalable=no">

Javascript Solution:

document.body.addEventListener("touchmove", function(event) {
    event.preventDefault();
    event.stopPropagation();
}, false);

jQuery Solution:

$(document.body).on("touchmove", function(event) {
    event.preventDefault();
    event.stopPropagation();
});

1 Answers1