Question

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

提前感谢，任何输入都非常受欢迎，因为我对JavaScript几乎不感兴趣。

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);

Here is demo

编辑：更新演示

Answer 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保持不变来识别它到达底部时，它将改变方向并开始向上滚动。

Answer 3

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

它有一些小问题，但我至少对基本的JavaScript有足够的了解来修复它们。希望这将有利于未来的人。：）

JavaScript无限上下滚动元素？

3 个答案: