如何使用jQuery在DIV中连续滚动内容？

Question

目标

目标是拥有一个具有固定高度和宽度的容器DIV,并且该内容中的HTML内容会自动连续垂直滚动.

问题 基本上我使用jQuery创建了下面的代码,将子DIV垂直向上滚动(移动),直到它在动画然后完成的边界父框之外,触发了一个事件处理程序,它重置子DIV的位置并启动进程再次.

这样工作正常,因此内容向上滚动留下一个空白区域,然后再从底部开始向上滚动.

我遇到的问题是,对此内容的要求就是内容看起来好像在不断重复,请参见下图以更好地解释这一点,有没有办法做到这一点？(我不想使用第三方插件或jQuery以外的库):

替代文字http://www.cameroncooke.com/playground/scrolling-example.gif

到目前为止我有什么

HTML:

<div id="scrollingContainer">

  <div class="scroller">

    <h1>This is a title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at orci mi, id gravida tellus. Integer malesuada ante sit amet enim pulvinar congue. Donec pulvinar dolor et arcu posuere feugiat id et felis.</p>

    <p>More content....</p>   

  </div>

</div>

CSS:

#scrollingContainer{
  height: 300px;
  width: 300px;
  overflow: hidden;
}

#scrollingContainer DIV.scroller{
  position: relative;
}

JavaScript:

/**
* Scrolls the content DIV
*/
function scroll() {

  if($('DIV.scroller').height() >  $('#scrollingContainer').height()) {

    var t = $('DIV.scroller').position().top + $('DIV.scroller').height();

    /* Animate */
    $('DIV.scroller').animate(
    {
      top: '-=' + t + 'px'
    }
    , 4000, 'linear', animationComplete);
  }
}

function animationComplete() {
  $(this).css('top', $('#scrollingContainer').height());
  scroll();
}

Answer 1

您需要复制内容元素并对齐它们，使它们垂直相邻，然后串联滚动它们。您当前的滚动应该有效，跳转将是不可见的，因为它应该从底部元素的顶部跳转到顶部元素的顶部，即跳转到外观相同的部分。我会将内容的两个副本（您可以直接.clone获取另一个副本）放入一个容器中并滚动它，这样您就不必担心移动两个元素。

如果你想真正优化它，你可以只在底部元素中显示内容的顶部部分（足以隐藏跳转），但除非你的内容真的很复杂和沉重，否则不值得付出努力。