jQuery - 每隔x秒向下滾動，然後滾動到頂部

Question

我有一個可滾動的div，我想每隔X秒向下滾動50個像素。這很好，工作。

我還有一個單獨的函數，當它到達底部時，將div滾動回頂部。還好;加工。

現在，我需要將兩者結合起來，這樣scrolldown纔會被忽略，直到我們再次滾動到頂部爲止。

我有一個 '工作' 例如在這裏，你會看到它有一些很瘋狂的行爲：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中，它滾動60px而不是50px，我在我的例子中「固定」。

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(){ 

    }); 
}