jQuery - 每隔x秒向下滚动一次,然后滚动到顶部 [英] jQuery - scroll down every x seconds, then scroll to the top
问题描述
我有一个可滚动的div,我想每X秒向下滚动50个像素。这很好并且有效。
I have a scrollable div that I want to scroll down 50 pixels every X seconds. That's fine and working.
我还有一个单独的功能,当它到达底部时将div滚动到顶部。也很好;工作。
I also have a seperate function that scrolls the div back to the top when it reaches the bottom. Also fine; working.
现在,我需要将两者结合起来,以便忽略scrollldown,直到我们再次滚动到顶部。
Now, I need to combine the two so the scrolldown is ignored until we have scrolled to the top again.
我在这里有一个工作的例子,因为你会发现它有一些非常疯狂的行为: http://jsfiddle.net/JVftf/
I have a 'working' example here, as you'll see it has some pretty nutty behavior: http://jsfiddle.net/JVftf/
window.setInterval(scrollit, 3000);
function scrollit() {
$('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
$('#scroller').bind('scroll', function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000);
}
});
推荐答案
我的版本:
var scrollingUp = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0) {
$('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
}
$('#scroller').bind('scroll', function () {
$('#status').html(scrollingUp);
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
scrollingUp = 1;
$('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() {
scrollingUp = 0;
});
}
});
演示: http://jsfiddle.net/EFmeK/
顺便说一句,在你的jsfiddle,它滚动60px而不是50px,我在我的例子中修复。
Btw, in your jsfiddle, it scrolls 60px instead of 50px, which I "fixed" in my example.
这篇关于jQuery - 每隔x秒向下滚动一次,然后滚动到顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!