如何在移动设备上创建模式导航菜单并防止正文滚动

How to create a modal navigation menu on mobile and prevent body scrolling?

本文关键字：菜单 导航 滚动 正文 模式 创建 移动      更新时间：2023-09-26

我寻找并测试了许多解决方案，但我还不能让它工作。我希望子导航菜单（模态）能够在显示时滚动，但不能滚动正文。

我试过了：

1：Javascript在模式打开时将CSS属性更改为"固定"：

var main = document.getElementById('main');
main.setAttribute("style", "position: fixed;");

问题：如果您在打开模态时滚动页面，页面会上升（因为"固定"也意味着您无法拥有滚动条）

2：Javascript在模式打开时将CSS属性更改为"溢出隐藏"：

document.body.setAttribute("style", "overflow: hidden;");

问题：在移动设备上不起作用，仍然滚动（我使用安卓）。

3：Javascript禁用触摸事件：

var main = document.getElementById('main');
main.addEventListener('touchstart', function(e){ e.preventDefault(); });
main.addEventListener('scroll', function(e){ e.preventDefault();});
main.addEventListener('touchmove', function(e){ e.preventDefault();});

问题 ：除非您从子导航菜单中开始触摸，否则有效。

看到这个以更好地理解我的意思：http://i45.tinypic.com/ajl3rt.png

那么，如何防止显示叠加菜单时在移动设备中滚动正文？

我也有类似的问题。通常 溢出：隐藏 在桌面上完成此操作。对于移动设备，您还需要应用固定位置。因此，当您的对话框处于活动状态时，将".noscroll"类添加到正文中：

body.noscroll{
overflow:hidden;
position:fixed;
}
相关文章：