div内的文字上下滚动显示

最新推荐文章于 2023-08-16 15:59:41 发布

原创最新推荐文章于 2023-08-16 15:59:41 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现div自动滚动的方法。通过获取div的总高度、可见高度及当前滚动位置，设置定时器使div按指定速度向上滚动，达到循环显示内容的效果。

var divscroll = document.getElementById('scroller');//scroller表示div的id
var wholeHeight = divscroll.scrollHeight;
var divHeight = divscroll.clientHeight;
setInterval(function scroll() {
    var scrollTop = divscroll.scrollTop;
    if (scrollTop + divHeight >= wholeHeight) {
        divscroll.scrollTop = 0;
    } else {
        divscroll.scrollTop = scrollTop + 5;//5表示元素滚动条内的顶部隐藏部分的高度增加值
    }
}, 100);//100表示每100毫秒