JavaScript无限上下元素滚动？答案

【问题标题】：JavaScript infinite up and down element scrolling?JavaScript无限上下元素滚动？
【发布时间】：2011-08-01 12:45:44
【问题描述】：

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

提前感谢，非常感谢任何输入，因为我在 JavaScript 方面并不平庸。

【问题讨论】：

见这里：stackoverflow.com/questions/6826464/css3-conveyor-belt-effect 和这里：flowplayer.org/tools/scrollable/index.html
如果您找到了自己的答案，请将其放在答案部分并标记为正确答案。不要只用你找到的答案编辑问题。
我会，但我没有 100 的声誉，而且还不到 8 小时。我认为最好进行编辑并说我找到了答案，而不是让人们浪费时间试图为我解答。

标签： javascript jquery

【解决方案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);

Here is demo

编辑：更新演示

【讨论】：

scrollHeight 给出的值大于实际内容高度。请参阅here 它会滚动到实际内容之外。
虽然这也符合我的喜好，但实际上我在您发布该帖子之前就找到了合适的解决方案。不过，谢谢，我一定会为那个添加书签以备将来使用。 :)
@Shadow，因为内容高度故意设置为 1000 像素。

【解决方案2】：

这是我刚刚使用 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 保持不变而确定它到达底部时，它会改变方向并开始向上滚动。

【讨论】：

【解决方案3】：

感谢您的回复，但我在其他地方找到了答案。这是我最终使用的：http://jsbin.com/onohan/3/edit#preview

它有几个小问题，但我至少对基本的 JavaScript 有足够的了解来解决这些问题。希望这将在未来使某人受益。 :)

【讨论】：