小编lou*_*lou的帖子

我寻找并测试了许多解决方案,但我无法使其工作.我希望子导航菜单(模态)能够在显示时滚动,但不能滚动身体.

我试过了 :

1:当模态打开时,Javascript将CSS属性更改为"fixed":

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

那么,当显示叠加菜单时,如何防止身体在移动设备中滚动？

我经常看到这样的事情:

<div id='side_logo'>
    <a class="logo" href="index.html">
         <img src="img/logo.png">
    </a>
</div>

使用上述标记而不仅仅是:有什么好处:

<a id='side_logo' class="logo" href="index.html">
        <img src="img/logo.png">
</a>