android - 使用 css 禁用移动滚动

Question

当 div 位于前台时，我想禁用正文滚动。div 是可滚动的，我不希望身体随之滚动。我在浏览器中完成了此操作，但在移动设备中不起作用。div打开时我需要更改什么：

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

到 div 关闭时：

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

但正如我所说，它不适用于移动设备（iOS 或 Android）。我也尝试了 epventdefault() 并没有帮助。css 会随着 onclick 事件发生变化......

Answer 1

这对我有用：

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

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

Answer 2

在遇到与移动滚动类似的问题后，导致我的可滚动 div 和不需要的滚动体混乱，touchmove 侦听器事件是关键。我遇到了一些我必须弄清楚的警告。一，为了删除事件侦听器，并让您的身体恢复滚动（就像我的情况一样，菜单从右侧滑入并覆盖整个窗口），您必须命名事件侦听器中包含的函数，这样您就可以使用 removeEventListener 调用要删除的相同函数。

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

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

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