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

更新：我们决定使用debounce作为需要停止的长卷轴（在触摸板上滑动手指）（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

你可以用旗帜解决这个问题。如果您当前正在设置网站div的位置，则可以使用全局标记isAnimating并将其设置为true。

所以代码看起来像这样：

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

lock 实际上不是必需的，但由于某些原因，每个滚动有时会发现超过一次的极值。

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

3 个答案: