定制滚动功能 - 闪烁效果

Question

我写了一个滚动动画到下一个DIV，这是在Firefox正常使用功能，但滚动不止一次当

Here is a fiddle

下面是代码铬闪烁：

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ; 
    var flag = true; 
    $('#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 && flag == true) 
     { 
      flag = false; 
      e.preventDefault(); 
      $('html, body').stop().animate({ 
       scrollTop: $('#hotels').offset().top 

      }, 2000, function() { 
       flag = true; 
       flag1 = true; 
       flag2 = true; 
      }); 

     } 

    }); 

    var mousewheelevt1 = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ; 
    var flag1 = true; 
    $('#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 && flag1 == true) 
     { 
      flag1 = false; 
      e.preventDefault(); 
      $('html, body').stop().animate({ 
       scrollTop: $('#training').offset().top 
      }, 2000, function() { 
       flag = true; 
       flag1 = true; 
       flag2 = true; 
     }); 

     } 
     else if (delta > 0 && flag1 == true) { 
      flag1 = false; 
      e.preventDefault(); 
      $('html, body').stop().animate({ 
       scrollTop: $('#start').offset().top 
      }, 2000, function() { 
       flag = true; 
       flag1 = true; 
       flag2 = true; 
      }); 

     } 
    }); 
    var mousewheelevt2 = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ; 
    var flag2 = true; 
    $('#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 if (delta > 0 && flag2 == true) { 
      flag2 = false; 
      e.preventDefault(); 
      $('html, body').stop().animate({ 
       scrollTop: $('#hotels').offset().top 
      }, 2000, function() { 
       flag = true; 
       flag1 = true; 
       flag2 = true; 
      }); 

     } 
    }); 

有人有一个想法如何让它在Chrome中运行得很好吗？

Answer 1

根据我的经验，立即对preventDefault()进行几乎总是一个好主意，然后进行其余的处理。 （当然，除非的preventDefault必须基于计算值）

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

function transitionTo(elem){ 
    $('html, body').stop().animate({ 
     scrollTop: $(elem).offset().top 

    }, 2000, function() { 
     flag = true; 
     flag1 = true; 
     flag2 = true; 
    }); 
} 

function getDelta(e){ 
    var evt = window.event || e ; 
    evt = evt.originalEvent ? evt.originalEvent : evt; 
    return evt.detail ? evt.detail*(-40) : evt.wheelDelta; 
} 

var flag = true; 
$('#start').bind(mousewheelevt, function(e){ 
    e.preventDefault(); 
    var delta = getDelta(e); 

    if(delta < 0 && flag == true) 
    { 
     flag = false; 
     transitionTo('#hotels'); 
    } 

}); 

var flag1 = true; 
$('#hotels').bind(mousewheelevt, function(e){ 
    e.preventDefault(); 
    var delta = getDelta(e); 

    if(delta < 0 && flag1 == true) 
    { 
     flag1 = false; 
     transitionTo('#training'); 
    } 
    else if (delta > 0 && flag1 == true) { 
     flag1 = false; 
     transitionTo('#start'); 
    } 
}); 

var flag2 = true; 
$('#training').bind(mousewheelevt, function(e){ 
    e.preventDefault(); 
    var delta = getDelta(e); 

    if(delta < 0) 
    { 


    } 
    else if (delta > 0 && flag2 == true) { 
     flag2 = false; 
     transitionTo('#hotels'); 
    } 
}); 

- 清理代码有点过，因为它可以更容易看到的变化

DEMO