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

Question

Aim

The aim is to a have a container DIV with a fixed height and width and have the HTML content within that DIV automatically scroll vertically continuously.

Question Basically I've created the code below using jQuery to scroll (move) the child DIV vertically upwards until its outside the bounding parent box where the animation then completes which triggers an event handler which resets the position of the child DIV and starts the process again.

This works fine, so the content scrolls up leaving a blank space and then starts from the bottom again and scrolls up.

The problem I have is that the requirements for this is for the content to appear as if it was continuously repeating, see below diagram to better explain this, is there a way to do this? (I don't want to use 3rd party plug ins or libraries other than jQuery):

_{(source: cameroncooke.com )}

What I have so far

The 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>

The CSS:

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

#scrollingContainer DIV.scroller{
  position: relative;
}

The 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

You'll need to duplicate your content element and align them so that they're vertically next to each other, and scroll them in tandem. Your current scrolling should work, the jump will be invisible because it should jump from the top of the bottom element to the top of the top element, that is, to a same-looking part. I'd put both copies of the content (you can just .clone it to get the other copy) in a container and scroll that, that way you don't have to worry about moving two elements.

If you want to really optimize it, you could only display the top part (enough to hide the jump) of the content in the bottom element, but unless your content is really complex and heavy, it's not worth the effort.

Answer 2

You want the content to "auto-repeat" and scroll forever? You should be able to add a new DIV below the text, and copy that text into the new DIV. Do this based on scroll position, removing the DIV above when it goes out of view. Basically you're just copying the text, pushing a new DIV to the bottom of the "stack" and popping it off the top when it's out of view.

Answer 3

Simply put you'll need two divs which are larger than the scroll box and you'll need to move move the one that's not visible below the one that is. If the two are exactly the same it shouldn't be noticeable.

Answer 4

Try this:

$('.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)");});

Working example can be seen here: http://www.timeswellness.com/index.aspx?page=others&rightnav=false&do=CancerDay