如何在最后一张幻灯片后禁用鼠标滚轮并在到达页面顶部时重新启用它？

Question

我试图在最后一张幻灯片上禁用鼠标滚轮，并在到达 FlexSlider 末尾时向下滚动到页面。这里的问题是，当我回到页面顶部时，我无法再次使用鼠标滚轮。 我在页面顶部使用全页 Flexslider。 下面是js代码：

$(document).ready(function() {
    $('#flexslider').flexslider({
      animation: "slide",
      useCSS: false,
      controlNav: false,
      directionNav: false,
      slideshow: false,
      mousewheel: true,
      animationLoop: false,
      touch:true,
      end: function(slider){
        $('#flexslider').unmousewheel();
        $(window).scroll(function (fn) {
            if ($(this).scrollTop()  <= 0 ){
                console.log('reached top');
                return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
            }
        });
      }
    });
  });

Answer 1

尝试下面的代码，在修改后的JavaScript代码中，我优化了与

FlexSlider

相关的鼠标滚轮事件的处理。最初，当到达最后一张幻灯片时，我通过在 FlexSlider 的结束回调中使用

e.preventDefault()

禁用 FlexSlider 上的鼠标滚轮。为了跟踪用户在到达最后一张幻灯片后是否向下滚动，我引入了一个

windowScrolled

标志，然后在用户滚动回页面顶部时重新启用

mousewheel

事件，确保在页面内平滑直观的导航

FlexSlider

以及整个页面。

$(document).ready(function() {
    var flexslider = $('#flexslider');
    var windowScrolled = false;

    flexslider.flexslider({
        animation: "slide",
        useCSS: false,
        controlNav: false,
        directionNav: false,
        slideshow: false,
        mousewheel: true,
        animationLoop: false,
        touch:true,
        end: function(slider) {
            flexslider.on('mousewheel', function(e) {
                e.preventDefault(); 
            });

            windowScrolled = true;
        }
    });

    $(window).scroll(function() {
        if (windowScrolled && $(this).scrollTop() <= 0) {
            console.log('reached top');
            flexslider.off('mousewheel'); 
            windowScrolled = false;
        }
    });
});