Aim
Цель состоит в том, чтобы иметь контейнер DIV с фиксированной высотой и шириной и иметь содержимое HTML в этом DIV, автоматически непрерывно прокручивать вертикально.
Вопрос
В основном я создал код ниже, используя 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();
}