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

cbeh67ev  于 5个月前  发布在  jQuery
关注(0)|答案(1)|浏览(38)

我试图禁用最后一张幻灯片上的鼠标滚轮,并向下滚动到页面时,达到了flexslider的结束.这里的问题是,我无法再次使用鼠标滚轮时,回到页面顶部.我在页面顶部使用fullpage 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");
            }
        });
      }
    });
  });

字符串

ne5o7dgx

ne5o7dgx1#

尝试以下代码,在修改后的JavaScript代码中,我优化了与FlexSlider相关的鼠标滚轮事件的处理。最初,我在FlexSlider的end回调中使用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;
        }
    });
});

字符串

相关问题