使用css禁用移动滚动

Question

I want to disable the body from scrolling when a div is in the foreground. The div is scrollable and I don't want the body to scroll along with it. I accomplished this in a browser but it doesn't work in mobile. What do I need to change from when the div is open:

$('body').css('overflow', 'hidden');

to when the div is closed:

$('body').css('overflow', 'auto');

But as I said, it doesn't work in mobile (iOS or Android). I tried epreventdefault() also and that didn't help. The css gets changed with onclick events...

Answer 1

this worked for me:

document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

Answer 2

After facing a similar problem with mobile scrolling causing a mess with my scrollable divs and unwanted scrolling body, the touchmove listener event is the key. A couple caveats I came across tho that I had to figure out. One, in order to remove the event listener, and give your body back its scrolling (as was my case with a menu that slide in from right and covered the entire window) you have to name the function that gets included iun the event listener, that way you can call the same function to be removed with removeEventListener.

var prevent = function(e){ 
    e.preventDefault();
};

function menuOpen(){
    document.body.addEventListener('touchmove', prevent);
};

function menuClose(){
    document.body.removeEventListener('touchmove', prevent);
};