这看起来是因为Swiper在初始化时，你的弹窗容器处于隐藏状态，导致它没法正确绑定鼠标滚轮事件，也无法准确计算容器的可见性和尺寸——我之前做项目时也踩过这个坑，给你几个实测有效的解决思路：

方案1：弹窗显示后再初始化Swiper #

既然初始化时容器不可见会出问题，那我们就等弹窗完全显示出来之后再创建Swiper实例。这样Swiper能正确识别容器的状态，绑定所需的滚动事件：

// 假设触发弹窗的按钮ID是open-product-modal，弹窗容器ID是product-modal
document.getElementById('open-product-modal').addEventListener('click', function() {
    // 先显示弹窗
    const modal = document.getElementById('product-modal');
    modal.style.display = 'block';
    
    // 加个小延迟，确保弹窗DOM已经渲染完成
    setTimeout(() => {
        new Swiper('.swiper-container', {
            direction: 'vertical',
            slidesPerView: 1,
            spaceBetween: 30,
            keyboard: {
                enabled: true,
                onlyInViewport: false,
            },
            mousewheel: {
                enabled: true,
                invert: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            simulateTouch: false,
        });
    }, 100);
});

方案2：调用Swiper的update方法（适合提前初始化的场景） #

如果你的业务逻辑需要提前初始化Swiper，那可以在弹窗显示后，调用Swiper的update()方法，让它重新计算容器尺寸并绑定事件：

// 提前初始化Swiper（此时弹窗处于隐藏状态）
let swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 1,
    spaceBetween: 30,
    keyboard: {
        enabled: true,
        onlyInViewport: false,
    },
    mousewheel: {
        enabled: true,
        invert: false,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    simulateTouch: false,
});

// 弹窗显示时触发更新
document.getElementById('open-product-modal').addEventListener('click', function() {
    const modal = document.getElementById('product-modal');
    modal.style.display = 'block';
    
    setTimeout(() => {
        swiper.update();
        // 额外：如果滚轮还是没反应，可以手动重新启用mousewheel模块
        swiper.mousewheel.enable();
    }, 100);
});

方案3：给Swiper容器设置焦点 #

你设置了simulateTouch: false，虽然这不会直接影响鼠标滚轮，但有时候容器没有焦点的话，鼠标事件可能不会被正确捕获。可以在弹窗显示后给Swiper容器加个焦点：

// 弹窗显示后执行
document.querySelector('.swiper-container').focus();

一般来说，方案1和方案2就能解决大部分问题，核心就是让Swiper在容器可见的状态下完成初始化或更新，这样它才能正确绑定滚动相关的事件。

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