Javascript AutoScroll Loop Divコンテンツ

Question

私はthis jsfiddleを持っています。私の人生のために、自動スクロールの際にコンテンツを作る方法を理解できません。基本的には、コンテンツが最下部に達するとすぐにループを再開して、divを再度表示するのに大きなギャップがないようにします。どんな助けもありがとう。ありがとう。私が使用しています

コードは、コンテンツの半分が非表示になるように、あなたは、そのまま外側の高さを保ち、.innerの内容を複製することができ

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

です。その後、高さの動きのすべてのサイクルで、あなたが戻ってジャンプするようにアニメーション。繰り返しが原因コンテンツのため、このジャンプは明白ではありません。あなたがする必要がどのような

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>