Javascript AutoScroll Loop Div Content

Question

У меня есть this jsfiddle, и я не могу на всю жизнь выяснить, как сделать контент не имеющим пробела при автоматической прокрутке. В основном, когда содержимое достигает дна, я хочу, чтобы цикл был перезапущен сразу, поэтому нет большого разрыва между показом divs снова. Любая помощь будет оценена. Благодарю.

код я использую

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>