限制“鼠标滚轮”增量每次滚动一次
我正在使用下面的代码，在不同的方向滚动两个div（），但我很想知道你是否可以限制滚动，所以每次滚动只会触发一次（而不是连续滚动并将我的函数发送到无尽的循环。
$('.page-left, .page-right').bind('mousewheel', function(event, delta) { var windowHeight = $(window).height(); if (delta 0) { nextProject(); } }); 你可以看到我在这里的位置： http ： //dev.rdck.co/lyonandlyon/
谢谢你，R
动画function供参考：
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}); }); };
你可以在鼠标滚轮function中检查动画（ 演示 ）
$('.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(); } }) );
你可以用旗帜解决这个问题。 如果您当前正在设置网站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 };
我建议检测极值以触发该function：
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; })
锁定实际上不应该是必要的，但由于某种原因，每个滚动有时会发现超过一次的极值。