Question

我使用媒体查询使导航叠加显示在小于40em的屏幕宽度上。当使用一小部分JQuery点击.mobile-nav时，我的.mobilemenu出现（并且正在消失）

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

我遇到的问题是，当它被激活时，后面的页面仍在滚动，但理想情况下我希望它固定在适当的位置。我已经尝试使用.addClass，如上所示，它会在.noscroll上添加overflow: hidden;类，但在浏览器上模拟时这似乎很有效（除了类不是删除所以页面卡住！）但在iOS上它根本不起作用。

我确信必须有一个更简单优雅的解决方案才能真正起作用！如果有人有任何想法会很棒。

Answer 1

回答并扩展here

但供参考，代码如下：

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);
        }
});

停止显示DIV叠加上的iOS滚动

1 个答案: