如何在使用鼠标滚轮和光滑滑块制作动画时禁用动画？

Question

我的网站上有一个光滑的滑块，我还使用 jquery-mousewheel 来切换幻灯片。问题是我想在滑动时禁用鼠标滚轮。你知道我怎么做吗？function detectScroll() {  $('body').bind('mousewheel', function(e){      if(e.originalEvent.wheelDelta /120 > 0) {        $('.slickSlider').slick('slickPrev');      }      else{        $('.slickSlider').slick('slickNext');      }  });}$('.slickSlider').slick({  vertical: true,  verticalSwiping: true,  autoplay: false,  slidesToShow: 1,  slidesToScroll: 1,  arrows: false,  dots: false,  infinite: false})detectScroll()

Answer 1

我找到了解决办法！

问题是我必须声明一个布尔值，我称之为动画。然后我使用 slick 的 on('beforeChange') 和 on('afterChange') 来检测动画是否完成。我只需要在鼠标滚轮函数的开头检查动画是真还是假，如果是真则返回假。

我希望它能帮助很多人！

var animating = false;

function detectScroll() {

  $('body').bind('mousewheel', function(e){

      //If animated than we wait the animation to be over

      if (animating) {

        return false;

      }

      if(e.originalEvent.wheelDelta /120 > 0) {

        $('.slickSlider').slick('slickPrev');

      }

      else{

        $('.slickSlider').slick('slickNext');

      }

  });

}

$('.slickSlider').slick({

  vertical: true,

  verticalSwiping: true,

  autoplay: false,

  slidesToShow: 1,

  slidesToScroll: 1,

  arrows: false,

  dots: false,

  infinite: false

})

$('.slick').on('beforeChange', function(event, slick, currentSlide, nextSlide){

  animating = true;

}).on('afterChange', function(event, slick, currentSlide, nextSlide){

  animating = false

});

detectScroll()