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);
    }
});

- Alan Shortis

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中，它滚动了60px而不是50px，我在我的示例中进行了“修复”。

- sascha

---

完美。修复我的错别字也值得额外的赞扬。 - Alan Shortis

Answer 2

可以尝试这样做：http://jsfiddle.net/JVftf/3/

window.setInterval(scrollit, 1000);

function scrollit() {
    console.log(($("#scroller").scrollTop() + $("#scroller").innerHeight()))
    console.log($("#scroller")[0].scrollHeight)

    if(($("#scroller").scrollTop() + $("#scroller").innerHeight()) >= $("#scroller")[0].scrollHeight)   
        $('#scroller').animate({ scrollTop: 0 }, 100).delay(900);  
    else   
        $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 60 }, 'slow',function(){

    });
}

- sdespont

---

在Chrome中看起来不错，但在IE9中似乎根本无法工作。 - Alan Shortis