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>