CODEWITHSUNDEEP
htmlcss
panthro
panthro

Reputation: 24099

Prevent page scroll

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?

Upvotes: 1

Views: 203

Answers (1)

Mouhamad Ounayssi
Mouhamad Ounayssi

Reputation: 361

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

Upvotes: 2

Related Questions