Question

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

滚动似乎正在工作，但只要用户只用鼠标滚轮滚动一步，只要轮子比步骤“滚动”更频繁，它就不适用于下一个div更多/打破一切。我已经设置了一个小提琴来演示这种行为：

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()来禁用默认的鼠标滚轮事件。

Answer 2

你应该在调用scroll事件之前使用一个标志，并且有一个值为true的变量，当调用scroll事件时，将变量设置为false，当然要确保仅在设置变量时执行scroll事件为true，动画完成后将变量设置为true。希望有所帮助。

鼠标滚轮事件过于频繁地发射/许多滚动会破坏动画

2 个答案: