javascript - 鼠标滚轮事件触发太频繁/许多滚动破坏动画

Question

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

滚动似乎有效，但只要用户只用鼠标滚轮滚动一步，一旦滚轮“滚动”的次数多于一步，它就不会对下一个 div 起作用更多/打破这一切。我已经设置了一个 fiddle 来演示行为:

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

     }
     });

有没有办法在第一个事件触发后禁用鼠标滚轮，或者您对如何解决这个问题有其他想法？

Answer 1

.stop().animate() 成功了。

FIDDLE

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