在手机中打开菜单后,停止身体滚动的方法可以通过以下几种方式实现:
overflow: hidden;
:通过将菜单容器的overflow
属性设置为hidden
,可以阻止页面内容的滚动,从而停止身体滚动。例如:.menu-container {
overflow: hidden;
}
var menuOpen = false;
function disableScroll() {
if (menuOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}
// 监听菜单打开/关闭事件
menuOpen = true; // 菜单打开
disableScroll();
menuOpen = false; // 菜单关闭
disableScroll();
var menuOpen = false;
function disableTouchScroll() {
if (menuOpen) {
document.addEventListener('touchmove', preventDefault, { passive: false });
} else {
document.removeEventListener('touchmove', preventDefault);
}
}
function preventDefault(event) {
event.preventDefault();
}
// 监听菜单打开/关闭事件
menuOpen = true; // 菜单打开
disableTouchScroll();
menuOpen = false; // 菜单关闭
disableTouchScroll();
这些方法可以根据具体的开发需求和场景选择使用。
领取专属 10元无门槛券
手把手带您无忧上云