Javascript AutoScroll循环Div内容

Question

我有这弹琴，我不能为我的生活弄明白如何使内容没有差距时自动滚动。基本上，当内容到达底部时，我希望循环立即重新启动，所以在再次显示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>

​