如何在FlexSlider最后一屏禁用鼠标滚轮，回到页顶时重新启用？

你的代码问题出在：滚动到Slider最后一屏解绑滚轮事件后，回到页面顶部时没有重新给Slider绑定滚轮事件，而且window.scroll的回调写法逻辑错误，导致没法重新启用Slider的滚轮控制。

修复后的代码 #

$(document).ready(function() {
    let flexSliderInstance;
    
    $('#flexslider').flexslider({
        animation: "slide",
        useCSS: false,
        controlNav: false,
        directionNav: false,
        slideshow: false,
        mousewheel: true,
        animationLoop: false,
        touch: true,
        start: function(slider) {
            // 保存Slider实例，后续操作要用
            flexSliderInstance = slider;
        },
        end: function(slider) {
            // 最后一屏时解绑Slider的滚轮事件，让页面能正常向下滚动
            $('#flexslider').unmousewheel();
        }
    });

    // 监听页面滚动
    $(window).scroll(function() {
        // 回到页面顶部时
        if ($(this).scrollTop() <= 0) {
            // 如果Slider不在第一屏，先切回去
            if (flexSliderInstance.currentSlide !== 0) {
                flexSliderInstance.flexAnimate(0);
            }
            // 重新绑定Slider的滚轮事件
            $('#flexslider').mousewheel(function(event, delta) {
                event.preventDefault();
                // 滚轮向上滚，切换上一屏；向下滚切换下一屏
                if (delta > 0) {
                    flexSliderInstance.flexAnimate(flexSliderInstance.currentSlide - 1);
                } else {
                    flexSliderInstance.flexAnimate(flexSliderInstance.currentSlide + 1);
                }
            });
        }
    });
});

核心修改说明 #

• 提前保存Slider实例，避免后续找不到操作对象
• 修正window.scroll的错误回调逻辑，改成正常监听滚动位置
• 回到顶部时，先确保Slider处于第一屏，再重新绑定滚轮事件
• 手动实现滚轮控制Slider的逻辑，确保事件重新生效

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