定製滾動功能 - 閃爍效果

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