我想知道是否有一种简单的方法来利用JavaScript(可能还包括jQuery?)使固定高度的div元素的内容在页面加载时无需任何用户输入或操作就可以无限向上或向下滚动(顶部,底部,顶部,底部等)?
提前感谢您的帮助,任何建议都将不胜感激,因为我对JavaScript几乎没有什么经验。
我想知道是否有一种简单的方法来利用JavaScript(可能还包括jQuery?)使固定高度的div元素的内容在页面加载时无需任何用户输入或操作就可以无限向上或向下滚动(顶部,底部,顶部,底部等)?
提前感谢您的帮助,任何建议都将不胜感激,因为我对JavaScript几乎没有什么经验。
使用纯JS,您可以像这样做:
var scroller = document.getElementById('scroller');
var delta = 15;
var lastSc;
//console.log(scroller.scrollTop, scrollHeight);
setInterval(function(){
var sc = scroller.scrollTop + delta;
scroller.scrollTop = sc;
if (scroller.scrollTop === lastSc){
delta = delta*(-1);
}
lastSc = scroller.scrollTop;
}, 10);
编辑:更新了演示
这是我刚刚用jQuery编写的东西:
var speed = 100; //smaller means faster
var offset = 5; //bigger means more text will be "scrolled" every time
function ScrollMyDiv() {
var myDiv = $("#MyDiv");
var direction = myDiv.attr("scroll_dir") || "";
var lastScrollTop = parseInt(myDiv.attr("last_scroll_top") || "0", 10);
if (direction.length === 0) {
myDiv.attr("scroll_dir", "down");
direction = "down";
}
var top = myDiv.scrollTop();
myDiv.attr("last_scroll_top", top + "")
if (direction === "down") {
if (top > 0 && lastScrollTop === top)
myDiv.attr("scroll_dir", "up");
top += offset;
} else {
if (top <= 0)
myDiv.attr("scroll_dir", "down");
top -= offset;
}
myDiv.scrollTop(top);
window.setTimeout(ScrollMyDiv, speed);
}
$(document).ready(function() {
ScrollMyDiv();
});
实时测试案例:http://jsfiddle.net/HmfNJ/1/
基本上,它会通过向下滚动(添加到scrollTop
)开始,然后当它识别到已经到达底部时,通过查看scrollTop
保持不变,它将改变方向并开始向上滚动。
var delta = 0.6, interval;
interval = setInterval(function(){
window.scrollBy(0, delta);
}, 20);
要清除间隔,您可以运行
clearInterval(interval);