我使用下面的代码,向不同方向滚动两个 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/ http://dev.rdck.co/lyonandlyon/
提前致谢,
右
动画函数参考:
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});
});
};
您可以只检查鼠标滚轮功能中的动画(demo http://jsbin.com/IgAHEmi/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();
}
});
更新:我们决定使用去抖,因为需要停止长滚动(将手指向下滑动触摸板)(更新了演示 http://jsbin.com/IgAHEmi/2/edit?output).
$(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();
}
}) );
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)