FullPage.js模态框打开时如何禁用页面滚动

你的核心需求是打开模态框时禁用FullPage.js的滚动，避免背景页面跟着滚动。原代码的问题在于触发逻辑没关联上自定义的滚动控制函数，导致禁用逻辑没生效，下面是修正后的完整实现：

修正后的代码 #

<div id="fullpage">
    <div class="section">
        <?php include './home-page/home-page-manufacturing-list.php';?> 
        <!-- 修正：调用openModal函数，而非直接修改display -->
        <button id="turnOff" onclick="openModal('id01')" class="w3-button w3-black">Open Modal</button>
    </div>
</div>  

<div id="id01" class="w3-modal">
    <div class="w3-modal-content">
        <div class="w3-container">
            <!-- 修正：传正确的模态框ID，添加ID方便绑定事件 -->
            <span id="closeModalButton" onclick="closeModal('id01')" class="w3-button w3-display-topright">&times;</span>

            <div class="container background-filter">
                <div class="row">
                    <div class="col-12">
                        <h3 class="section-title"></h3>
                    </div>
                    <div class="col-12">
                        <h5>At our company, we have a passion for wood working that shines through in all of our
                            manufacturing and interior design projects. We are experts in crafting custom wood
                            furniture, fixtures, and accents that are not only functional but also aesthetically</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    var isModalOpen = false;

    // 禁用FullPage滚动：关闭鼠标滚轮和键盘控制
    function disableFullPageScroll() {
        $.fn.fullpage.setAllowScrolling(false);
        $.fn.fullpage.setKeyboardScrolling(false);
    }

    // 恢复FullPage滚动
    function enableFullPageScroll() {
        $.fn.fullpage.setAllowScrolling(true);
        $.fn.fullpage.setKeyboardScrolling(true);
    }

    // 打开模态框并禁用滚动
    function openModal(modalId) {
        document.getElementById(modalId).style.display = 'block';
        isModalOpen = true;
        disableFullPageScroll();
    }

    // 关闭模态框并恢复滚动
    function closeModal(modalId) {
        document.getElementById(modalId).style.display = 'none';
        isModalOpen = false;
        enableFullPageScroll();
    }

    // 绑定按钮事件（与DOM中的ID对应）
    $('#turnOff').on('click', function() {
        openModal('id01');
    });

    $('#closeModalButton').on('click', function() {
        closeModal('id01');
    });

    // 额外拦截窗口滚动，防止意外触发背景滚动
    $(window).on('scroll', function(event) {
        if (isModalOpen) {
            event.preventDefault();
            event.stopPropagation();
        }
    });
});
</script>

关键修改点说明 #

• 触发逻辑修正：打开按钮的onclick改为调用openModal('id01')，关闭按钮传正确的IDid01，确保滚动控制函数被执行
• 事件绑定匹配：把事件监听绑定到实际存在的按钮ID（#turnOff和#closeModalButton）
• FullPage API使用：通过setAllowScrolling禁用鼠标滚轮滚动，setKeyboardScrolling禁用键盘方向键滚动，这是FullPage官方推荐的禁用方式
• 滚动事件拦截：额外监听窗口滚动事件，在模态框打开时阻止默认行为，增强兼容性

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