移动端打开下拉菜单时禁止页面滚动的实现方案求助

以下是集成了触摸滚动禁止逻辑的完整代码，同时适配窗口resize场景：

<script>
//Toggle mobile menu & change icon on click
jQuery(function() {
    // 滚动禁止状态开关
    let isScrollDisabled = false;

    // 禁止触摸滚动的处理函数
    function preventBehavior(e) {
        e.preventDefault(); 
    };

    // 切换滚动禁止状态的通用方法
    function toggleScrollLock() {
        if (isScrollDisabled) {
            // 取消禁止：移除touchmove监听，恢复body滚动
            document.removeEventListener("touchmove", preventBehavior);
            jQuery('body').css('overflow', 'auto');
        } else {
            // 开启禁止：添加touchmove监听，禁止body滚动（增强PC/平板体验）
            document.addEventListener("touchmove", preventBehavior, {passive: false});
            jQuery('body').css('overflow', 'hidden');
        }
        // 切换开关状态
        isScrollDisabled = !isScrollDisabled;
    }

    jQuery('.nav-icon').click(function(){
        jQuery('#nav-container').slideToggle(280);
        jQuery('.nav-icon i').toggleClass('change-icon');
        // 点击图标时切换滚动禁止状态
        toggleScrollLock();
    });   
    
    // Close mobile menu on screen size
    jQuery(window).on('resize', function(){
        let win = jQuery(this);
        if(win.width() > 1024){
            jQuery('#nav-container').show();
            // 屏幕变宽时，强制取消滚动禁止（菜单默认显示）
            if (isScrollDisabled) {
                toggleScrollLock();
            }
        } else {
            jQuery('#nav-container').hide();
            // 屏幕变窄且菜单隐藏时，确保滚动可正常进行
            if (isScrollDisabled) {
                toggleScrollLock();
            }
        }
    });
});
</script>

关键改动说明 #

• 新增isScrollDisabled开关变量，跟踪当前滚动禁止状态
• 封装toggleScrollLock方法，统一处理滚动禁止/恢复逻辑：
  • 禁止滚动时：添加touchmove事件监听阻止触摸滑动，同时给body设置overflow:hidden禁止鼠标滚轮滚动（覆盖更多场景）
  • 恢复滚动时：移除touchmove监听，恢复body默认滚动行为
• 点击导航图标时，同步调用toggleScrollLock切换滚动状态
• 窗口resize时：
  • 屏幕宽度超过1024px时，强制恢复滚动（菜单默认显示，无需禁止）
  • 屏幕宽度小于等于1024px且菜单隐藏时，确保滚动正常（避免resize后状态异常）

内容的提问来源于stack exchange，提问作者Victor