JavaScript无限上下滚动元素？

Question

我想知道是否有一种简单的方法来利用JavaScript（可能还包括jQuery？）使固定高度的div元素的内容在页面加载时无需任何用户输入或操作就可以无限向上或向下滚动（顶部，底部，顶部，底部等）？

提前感谢您的帮助，任何建议都将不胜感激，因为我对JavaScript几乎没有什么经验。

- Alex Bennett

---

请参见这里：http://stackoverflow.com/questions/6826464/css3-conveyor-belt-effect 和这里：http://flowplayer.org/tools/scrollable/index.html - Ariel

如果您找到了自己的答案，请将其放在答案部分并将其标记为正确答案。不要只是编辑问题并附上您找到的答案。 - FishBasketGordo

我本来想这样做的，但是我的声望还不到100，而且时间还不到8小时。我觉得最好还是编辑一下并说明我已经找到了答案，而不是让其他人浪费时间来回答我的问题。 - Alex Bennett

Answer 1

使用纯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);

这里是演示

编辑：更新了演示

- Molecular Man

---

scrollHeight 给出的值比实际内容高度要大。请参见此处，它会滚动超出实际内容。 - Shadow The Spring Wizard

尽管这对我来说也可行，但在你发帖之前，我实际上已经找到了一个合适的解决方案。谢谢你，不过我肯定会收藏它以备将来使用。 :) - Alex Bennett

@Shadow，因为内容高度被有意地设置为1000像素。 - Molecular Man

Answer 2

感谢回复，但我在其他地方找到了答案。这是我最终使用的代码：http://jsbin.com/onohan/3/edit#preview 它有一些小问题，但我至少知道基本的JavaScript知识来解决它们。希望这对未来的某个人有所帮助。 :)

- Alex Bennett

Answer 3

这是我刚刚用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保持不变，它将改变方向并开始向上滚动。

- Shadow The Spring Wizard

Answer 4

为了实现平滑的滚动到底部，这是一段使用VanillaJS编写的代码，对我来说效果很好。

var delta = 0.6, interval;
interval = setInterval(function(){
    window.scrollBy(0, delta);
}, 20);

要清除间隔，您可以运行

clearInterval(interval);

- Osama Malik