6

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

我试过了 ：

1：当模式打开时，Javascript 将 CSS 属性更改为“固定”：

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

问题：如果您在打开模式时正在滚动页面，页面会上升（因为“固定”也意味着您不能有滚动条）

2：当模式打开时，Javascript 将 CSS 属性更改为“溢出隐藏”：

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

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

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

那么，当显示覆盖菜单时，如何防止移动设备中的正文滚动？

4

1 回答 1

0

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

body.noscroll{
overflow:hidden;
position:fixed;
}
于 2013-09-26T00:27:11.997 回答