限制'鼠标滚轮'三角形每次滚动一次

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

你可以在鼠标滚轮功能中检查动画(演示)

$('.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();
    }
});

更新:我们决定使用debounce作为需要停止的长卷轴(在触摸板上滑动手指)(更新演示).

$(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();
    }
}) );