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

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

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

我希望它能帮助很多人！

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()