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.