fullpage.js模态框打开时禁止页面滚动的问题求助

问题根源 #

你遇到的「页面先滚动一次才禁用」的问题，本质是wheel事件触发时，fullpage.js的滚动逻辑已经先于你的代码执行，导致第一次滚动无法被拦截。需要从「提前拦截滚动信号」和「主动绑定模态框状态切换」两个角度修复。

解决方案 #

方案1：绑定模态框开关事件（推荐） #

不要在滚动事件里被动判断状态，直接在模态框的显示/隐藏回调中主动切换fullpage的滚动权限，同时拦截原生滚动：

$(document).ready(function () {
    // 初始化fullpage
    $('#fullpage').fullpage({
        normalScrollElements: ".tableContainer",
        keyboardScrolling: true // 默认开启键盘滚动，后续动态控制
    });

    // 模态框打开时的处理
    $('.modal-open-btn').on('click', function() {
        // 禁用fullpage所有滚动方式（滚轮、触摸、键盘）
        $.fn.fullpage.setAllowScrolling(false);
        $.fn.fullpage.setKeyboardScrolling(false);
        // 拦截页面原生滚动
        $('body').css('overflow', 'hidden');
    });

    // 模态框关闭时的处理
    $('.modal-close-btn').on('click', function() {
        // 恢复fullpage滚动权限
        $.fn.fullpage.setAllowScrolling(true);
        $.fn.fullpage.setKeyboardScrolling(true);
        // 恢复原生滚动
        $('body').css('overflow', 'auto');
    });

    // 补充：点击模态框遮罩关闭的场景
    $('.modal-overlay').on('click', function() {
        $.fn.fullpage.setAllowScrolling(true);
        $.fn.fullpage.setKeyboardScrolling(true);
        $('body').css('overflow', 'auto');
    });
});

方案2：修复原滚动事件拦截逻辑 #

如果必须保留滚动事件监听的方式，需要先阻止事件默认行为，再切换滚动权限，确保fullpage无法接收到滚动信号：

$(document).ready(function () {
    $('#fullpage').fullpage({
        normalScrollElements: ".tableContainer",
    });

    // 覆盖滚轮、触摸、键盘滚动事件
    $(window).on("wheel touchmove keydown", function (e) {
        const modalIsOpen = document.getElementsByClassName("modalIsOpen").length > 0;
        
        if (modalIsOpen) {
            // 先阻止原生滚动，截断fullpage的滚动触发链
            e.preventDefault();
            // 禁用fullpage滚动权限
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setKeyboardScrolling(false);
        } else {
            // 恢复滚动权限
            $.fn.fullpage.setAllowScrolling(true);
            $.fn.fullpage.setKeyboardScrolling(true);
        }
    });
});

关键注意事项 #

• 不要只处理鼠标滚轮，还要覆盖touchmove（触摸滚动）和keydown（键盘上下键），避免遗漏场景。
• 使用setKeyboardScrolling控制键盘导航，防止用户通过键盘触发fullpage滚动。
• 绑定模态框开关事件是更高效的方式，不需要每次滚动都判断状态，响应更及时。

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