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

【问题标题】：How to continuously scroll content within a DIV using jQuery?如何使用 jQuery 在 DIV 中连续滚动内容？
【发布时间】：2010-04-09 17:35:10
【问题描述】：

瞄准

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

问题基本上我已经使用jQuery创建了下面的代码来垂直向上滚动（移动）子DIV，直到它在动画完成的边界父框之外触发事件处理程序，该事件处理程序重置子DIV的位置并再次启动该过程.

这很好，所以内容向上滚动留下一个空白区域，然后再次从底部开始向上滚动。

我的问题是这个要求是让内容看起来好像在不断重复，看下图更好地解释这一点，有没有办法做到这一点？（我不想使用 jQuery 以外的第三方插件或库）：

_{（来源：cameroncooke.com）}

我目前所拥有的

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();
}

【问题讨论】：

标签： javascript jquery jquery-ui animation scroll

【解决方案1】：

您需要复制您的内容元素并对齐它们，使它们在垂直方向上彼此相邻，并同时滚动它们。您当前的滚动应该可以工作，跳转将是不可见的，因为它应该从底部元素的顶部跳转到顶部元素的顶部，即到相同外观的部分。我会将内容的两个副本（您可以通过 .clone 获取另一个副本）放在一个容器中并滚动它，这样您就不必担心移动两个元素。

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

【讨论】：

【解决方案2】：

您希望内容“自动重复”并永远滚动吗？您应该能够在文本下方添加一个新的 DIV，并将该文本复制到新的 DIV 中。根据滚动位置执行此操作，当它消失时删除上面的 DIV。基本上你只是复制文本，将一个新的 DIV 推到“堆栈”的底部，并在它看不见时将其从顶部弹出。

【讨论】：

【解决方案3】：

简单地说，您需要两个比滚动框大的 div，并且您需要将不可见的 div 移动到其下方。如果两者完全相同，则不应引起注意。

【讨论】：

【解决方案4】：

试试这个：

$('.upBut').bind('click',function(){
    $('.articleWrapper').prepend($('.article:last')).children('.article:first').css({display:'none'}).show('slow');
});
$('.downBut').bind('click',function(){
    //$('.articleWrapper').append($('.article:first')).children('.article:last').css({display:'none'}).show('slow');
    $('.article:first').hide('slow',function(){$(this).appendTo('.articleWrapper').show('slow');});
});
$('.upBut').hover(function(){$(this).css("background-image", "url(images/up_green.png)");},function(){$(this).css("background-image", "url(images/up_red.png)");});
$('.downBut').hover(function(){$(this).css("background-image", "url(images/down_green.png)");},function(){$(this).css("background-image", "url(images/down_red.png)");});

工作示例可以在这里看到： http://www.timeswellness.com/index.aspx?page=others&rightnav=false&do=CancerDay

【讨论】：