JavaScript无限上下滚动元素

JavaScript infinite up and down element scrolling?

本文关键字：元素 滚动 上下 无限 JavaScript      更新时间：2023-09-26

我想知道是否有一种简单的方法来使用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);

这里是demo

编辑:更新demo

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

谢谢你的回复，但是我在别处找到了我的答案。下面是我最终使用的:http://jsbin.com/onohan/3/edit#preview

它有一些小问题，但我至少知道足够的基本JavaScript来修复它们。希望这将在未来受益的人。:)

为了获得滚动到底部的平滑过渡，这是我使用的VanillaJS代码

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

要清除Interval，可以运行

clearInterval(interval);
相关文章：