滾輪事件發射太頻繁/很多滾動破壞動畫

我寫了一個小函數爲了讓我的頁面很好地滾動到下一個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); 

    } 
    });

有沒有一種方法來禁用鼠標滾輪後的第一個觸發的事件或你有關於如何解決這個問題的其他想法？

來源

2014-11-21 baao

.stop().animate()訣竅。

FIDDLE

您還應該使用e.preventDefault()禁用默認的鼠標滾輪事件，如果你想擺脫閃爍。

來源

2014-11-21 15:59:25 Anubhav

謝謝，幾乎正是我一直在尋找的東西。但是現在，如果我滾動一次以上，它會稍微「搖動」一下內容，關於如何擺脫它的任何想法？ – baao 2014-11-21 16:06:05

這就是我在說的閃爍 – Anubhav 2014-11-21 16:06:27

再次感謝，我應該閱讀整個答案之前beeing到第一部分高興... :) – baao 2014-11-21 16:07:40

你應該在你調用scroll事件之前使用一個標誌有一個值爲true的變量，當調用scroll事件時，將變量設置爲false，當然確保只有當變量是設置爲true，一旦動畫完成，將變量設置爲true。希望有所幫助。

來源

2014-11-21 16:11:11 santi6291

好點，謝謝！ – baao 2014-11-21 16:23:47

滾輪事件發射太頻繁/很多滾動破壞動畫

回答

相關問題