Mục tiêuLàm cách nào để liên tục cuộn nội dung trong một DIV bằng jQuery?
Mục đích là có hộp chứa DIV với chiều cao cố định và chiều rộng và có nội dung HTML trong đó DIV tự động cuộn theo chiều dọc liên tục.
Câu hỏi Về cơ bản tôi đã tạo ra mã dưới đây sử dụng jQuery để di chuyển (move) đứa trẻ DIV thẳng đứng cho đến khi nó bên ngoài hộp mẹ bounding nơi đoạn hoạt cảnh sau đó hoàn tất mà gây nên một event handler mà resets vị trí của đứa trẻ DIV và bắt đầu lại quá trình.
Tính năng này hoạt động tốt, vì vậy nội dung cuộn lên để lại khoảng trống và sau đó bắt đầu lại từ dưới cùng và cuộn lên.
Vấn đề tôi có là yêu cầu cho nội dung này xuất hiện như thể nó liên tục lặp lại, xem sơ đồ dưới đây để giải thích rõ hơn, có cách nào để làm điều này không? (Tôi không muốn sử dụng in bên thứ 3 cắm hoặc các thư viện khác hơn jQuery):
alt text http://www.cameroncooke.com/playground/scrolling-example.gif
Những gì tôi có cho đến nay
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();
}