javascript - jQuery - 每 x 秒向下滚动一次，然后滚动到顶部

Question

我有一个可滚动的 div，我想每 X 秒向下滚动 50 像素。这很好并且有效。

我还有一个单独的函数，当它到达底部时将 div 滚动回顶部。还可以；工作。

现在，我需要将两者结合起来，以便在我们再次滚动到顶部之前忽略向下滚动。

我这里有一个“有效”的例子，你会看到它有一些非常疯狂的行为: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);
    }
});

Answer 1

我的版本:

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 中，它滚动 60 像素而不是 50 像素，我在我的示例中“修复”了这一点。