Javascript AutoScroll Loop Div 內容

Question

我有這個 jsfiddle ，我一生都無法弄清楚如何在自動滾動時使內容沒有間隙。 基本上，當內容到達底部時，我希望循環立即重新啟動，這樣再次顯示 div 之間就沒有太大的差距。 任何幫助將不勝感激。 謝謝。

我正在使用的代碼是

function autoScroll(){
var top = parseInt($(".inner").css("top").replace("px",""));
var height = $(".outer").outerHeight();
if(top <  height) {
   $(".inner").animate({"top":height},25000,autoScroll)           
}
else {
    $(".inner").css({"top":-height});
    autoScroll();
} 
}
autoScroll();

Answer 1

您可以復制.inner的內容，保持外部高度不變，以便隱藏一半的內容。 然后設置動畫，以便在每個高度移動周期中，您都向后跳。 由於內容重復，這個跳轉不會很明顯：

 function autoScrollDown(){ $(".inner").css({top:-$(".outer").outerHeight()}) // jump back .animate({top:0},5000,"linear", autoScrollDown); // and animate } function autoScrollUp(){ $(".inner").css({top:0}) // jump back .animate({top:-$(".outer").outerHeight()},5000,"linear", autoScrollUp); // and animate } // fix hight of outer: $('.outer').css({maxHeight: $('.inner').height()}); // duplicate content of inner: $('.inner').html($('.inner').html() + $('.inner').html()); autoScrollUp();

 *{ margin:0; padding:0; } .inner{ position:relative; top:0px; } .outer{ overflow:hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div class="inner"> <h3>Scrolling down... line 3</h3> <h3>Scrolling down... line 2</h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> </div> </div>