限制'滾輪'delta以每次滾動觸發一次

Question

我使用下面的代碼來向不同方向滾動兩個div（），但我很想知道您是否可以限制滾動，以便每次只觸發一次滾動（而不是它不斷地滾動和送我的功能集成到一個無限循環

$('.page-left, .page-right').bind('mousewheel', function(event, delta) { 
    var windowHeight = $(window).height(); 
    if (delta < 0) { 
     prevProject(); 
    } 
    if (delta > 0) { 
     nextProject(); 
    } 
}); 

你能看到我較昨日上漲到這裏：。http://dev.rdck.co/lyonandlyon/

由於提前， [R

參考動畫功能：

var prevProject = function() { // up arrow/scroll up 
    var windowHeight = $(window).height(); 

    $('.page-left .page-left-wrapper').css({bottom:'auto'}); 
    $('.page-left .page-left-wrapper').animate({top:0},800, function() { 
     $('.page-left .page-left-wrapper').prepend($('.page-left .project-left:last-of-type')); 
     $('.page-left .page-left-wrapper').css({top:-windowHeight}); 
    }); 
    $('.page-right .page-right-wrapper').css({top:'auto'}); 
    $('.page-right .page-right-wrapper').animate({bottom:+windowHeight*2},800, function() { 
     $('.page-right .page-right-wrapper').append($('.page-right .project-right:first-of-type')); 
     $('.page-right .page-right-wrapper').css({bottom:+windowHeight}); 
    }); 
}; 


var nextProject = function() { // down arrow/scroll down 
    var windowHeight = $(window).height(); 

    $('.page-left .page-left-wrapper').animate({top:0},800, function() { 
     $('.page-left .page-left-wrapper').prepend($('.page-left .project-left:last-of-type')); 
     $('.page-left .page-left-wrapper').css({top:-windowHeight}); 
    }); 
    $('.page-right .page-right-wrapper').animate({bottom:+windowHeight*2},800, function() { 
     $('.page-right .page-right-wrapper').append($('.page-right .project-right:first-of-type')); 
     $('.page-right .page-right-wrapper').css({bottom:+windowHeight}); 
    }); 
}; 

Answer 1

你可以只檢查動畫的鼠標滾輪功能內（demo）

$('.page-left, .page-right').on('mousewheel', function(event, delta) { 
    if ($('.page-left-wrapper, .page-right-wrapper').is(':animated')) { 
     return false; 
    } 
    var windowHeight = $(window).height(); 
    if (delta < 0) { 
     prevProject(); 
    } 
    if (delta > 0) { 
     nextProject(); 
    } 
}); 

---

更新：我們決心利用防反跳因爲需要停止長滾動（將手指向下滑動觸摸板）（updated demo）。

$(document).keydown($.debounce(250, function(e) { 
    switch (e.which) { 
    case 38: // up arrow 
     prevProject(); 
     break; 
    case 40: // down arrow 
     nextProject(); 
     break; 
    } 
})); 

$('.page-left, .page-right').on('mousewheel', $.debounce(250, function(event, delta) { 
    var windowHeight = $(window).height(); 
    if (delta < 0) { 
     prevProject(); 
    } 
    if (delta > 0) { 
     nextProject(); 
    } 
})); 

Answer 2

您可以用標誌解決此問題。您可以使用全球標誌isAnimating並將其設置爲true，前提是您目前正在爲網站的div的位置設置動畫。

因此，代碼可以是這個樣子：

var isAnimating = false; 

$('.page-left, .page-right').bind('mousewheel', function(event, delta) { 
    // if the div will be animated at this moment return 
    if(isAnimating) { 
     return; 
    } 

    var windowHeight = $(window).height(); 
    if (delta < 0) { 
     prevProject(); 
    } 
    if (delta > 0) { 
     nextProject(); 
    } 
}); 

var prevProject = function() { 
    isAnimating = true; 

    var oneIsDone = false, 
     finish = function() { 
      // if both animations are done, set the flag to false 
      if(oneIsDone) { 
       isAnimating = false; 
      } 
      // at least one is done... 
      oneIsDone = true; 
     }; 

    // animate the previous project and set the flag to false (in the callback) 
    $('.page-left .page-left-wrapper').css({bottom:'auto'}); 
    $('.page-left .page-left-wrapper').animate({top:0},800, function() { 
     $('.page-left .page-left-wrapper').prepend($('.page-left .project-left:last-of-type')); 
     $('.page-left .page-left-wrapper').css({top:-windowHeight}); 
     finish(); 
    }); 
    $('.page-right .page-right-wrapper').css({top:'auto'}); 
    $('.page-right .page-right-wrapper').animate({bottom:+windowHeight*2},800, function() { 
     $('.page-right .page-right-wrapper').append($('.page-right .project-right:first-of-type')); 
     $('.page-right .page-right-wrapper').css({bottom:+windowHeight}); 
     finish(); 
    }); 
}; 

var nextProject = function() { 
    // the same as in the prevProject function, but only in the other direction 
}; 

Answer 3

我建議檢測極值火功能：

var mw1 = 0; 
var mw2 = 0; 
var lock; 
$(document).bind('mousewheel', function(evt) { 
    var delta = evt.originalEvent.deltaY 
    if(((delta > 0 && delta < mw2 && mw2 > mw1) || (delta < 0 && delta > mw2 && mw2 < mw1)) && !lock){ 
     console.log(mw1 + " " + mw2 + " " + delta) 
     // call some function here 
     lock = true; 
     window.setTimeout(function(){ 
      lock = false; 
     },200) 
    } 
    mw1 = mw2; 
    mw2 = delta; 
}) 

鎖其實不應該是必要的，但有時極值被發現超過每滾動一次出於某種原因。