javascript - 鼠标滚轮事件触发次数过多/许多滚动会中断动画

我编写了一个小函数，以使页面很好地滚动到下一个div。

滚动似乎是有效的，但前提是用户仅使用鼠标滚轮滚动一步，而滚轮滚动的频率比踩踏频率高的多时，它将不再适用于下一个div /中断这一切。我设置了一个小提琴来演示这种行为：

DEMO

javascript代码如下所示：

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;

     $('#start').bind(mousewheelevt, function(e){

     var evt = window.event || e ;
     evt = evt.originalEvent ? evt.originalEvent : evt;
     var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

     if(delta < 0)
     {


     $('html, body').animate({
     scrollTop: $('#hotels').offset().top
     }, 2000);

     }
     });

     var mousewheelevt1 = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;

     $('#hotels').bind(mousewheelevt1, function(e){

     var evt = window.event || e ;
     evt = evt.originalEvent ? evt.originalEvent : evt;
     var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

     if(delta < 0)
     {
     $('html, body').animate({
     scrollTop: $('#training').offset().top
     }, 2000);

     }
     else {
     $('html, body').animate({
     scrollTop: $('#start').offset().top
     }, 2000);

     }
     });
   var mousewheelevt2 = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;

     $('#training').bind(mousewheelevt2, function(e){

     var evt = window.event || e ;
     evt = evt.originalEvent ? evt.originalEvent : evt;
     var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

     if(delta < 0)
     {


     }
     else {
     $('html, body').animate({
     scrollTop: $('#hotels').offset().top
     }, 2000);

     }
     });

有没有一种方法可以在第一个事件触发后禁用鼠标滚轮，或者您对解决该问题还有其他想法吗？

最佳答案

.stop().animate()做到了。

FIDDLE

如果要消除闪烁，还应该使用e.preventDefault()禁用默认的鼠标滚轮事件。

关于javascript - 鼠标滚轮事件触发次数过多/许多滚动会中断动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27065320/