Нацелиться

Цель к контейнерного DIV с фиксированной высотой и шириной, и имейте содержимое HTML в том, который DIV автоматически прокручивает вертикально непрерывно.

Вопрос В основном, который я создал код ниже использования jQuery для прокрутки (перемещает) дочерний DIV вертикально вверх пока его внешняя сторона, ограничение порождает поле, где анимация затем завершается, какие триггеры обработчик событий, который сбрасывает положение дочернего DIV и запускает процесс снова.

Это хорошо работает, таким образом, содержание прокручивает отъезд пробела и затем начинает с нижней части снова и прокручивает.

Проблема, которую я имею, который является требованиями для этого, состоит в том, чтобы содержание появилось, как будто это непрерывно повторялось, посмотрите ниже схемы для лучше объяснения этого, есть ли способ сделать это? (Я не хочу использовать сторонний разъем ins или библиотеки кроме jQuery):

_{(источник: cameroncooke.com)}

Что я имею до сих пор

HTML:

  


    
This is a title

    
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.

    
More content....
   

  

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