停止 iOS 滚动 DIV 覆盖出现

Question

我正在使用媒体查询使导航叠加层出现在宽度小于 40em 的屏幕上。当使用 JQuery

的一小部分单击 .mobilemenu 时，我的 .mobile-nav 出现（并消失）

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
    jQuery('body').addClass('noscroll');
    e.preventDefault();
});

我遇到的问题是，当它被激活时，后面的页面仍在滚动，但理想情况下我希望它固定在适当的位置。我试过使用 .addClass ，正如你在上面看到的那样，它附加了一个 .noscroll class 和 overflow: hidden; 但这似乎在浏览器上模拟时效果很好（除了 class 没有被删除，所以页面被卡住了！）但是在 iOS 上它根本不起作用。

我敢肯定，一定有更简单、更优雅且实际可行的解决方案！如果有人有任何想法那就太好了。

Answer 1

已回答并扩展

但仅供参考，代码如下：

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
        if(jQuery('.mobile-nav').hasClass('active')) {
            $('body').on('touchmove', false);
        } else  {
            $('body').off('touchmove', false);
        }
});

停止 iOS 滚动 DIV 覆盖出现

Stop iOS scroll on DIV overlay appear

jquery

overlay

overflow

ios