限制'鼠标滚轮'每次滚动触发一次增量 [英] Limit 'mousewheel' delta to fire once per scroll
本文介绍了限制'鼠标滚轮'每次滚动触发一次增量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用下面的代码,在不同的方向滚动两个 div () 但我很想知道你是否可以限制滚动,这样每个滚动只触发一次(而不是它不断滚动并发送我的函数进入无限循环.
I'm using the following code below, to scroll two divs in different directions () but I'm curious to know if you can limit the scroll so it only fires once per scroll (rather than it continually scrolling and sending my functions into an endless loop.
$('.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/
You can see where I'm up up to here: 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});
});
};
推荐答案
您可以只检查鼠标滚轮功能内的动画 (演示)
You can just check for animation within the mousewheel function (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();
}
});
<小时>
更新:我们决定使用去抖动,因为需要停止长滚动(在触摸板上滑动手指)(更新演示).
$(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();
}
}) );
这篇关于限制&#39;鼠标滚轮&#39;每次滚动触发一次增量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文