JavaScript 实现无缝循环滚动效果

想把 table 中的内容做成滚动效果,尝试了很多代码,有的都只循环了一次就停了。这个代码会一直循环,而且无缝,解释也非常详细。希望对大家有帮助!

[removed]
[removed] = function() {
    var speed = 50;
    var scrollContainer = document.getElementById('scrollContainer');
    var scrollContent = document.getElementById('scrollContent');
    var clonedContent = scrollContent.cloneNode(true);
    scrollContainer.appendChild(clonedContent);

    function scroll() {
        if (scrollContainer.scrollTop >= scrollContent.scrollHeight) {
            scrollContainer.scrollTop = 0;
        } else {
            scrollContainer.scrollTop++;
        }
    }
    var scrolling = setInterval(scroll, speed);
}
[removed]

<style>
#scrollContainer {
    height: 200px;
    overflow: hidden;
    position: relative;
}
#scrollContent {
    height: auto;
    width: 100%;
    position: absolute;
}
</style>

<!-- table content here -->
doc 文件大小:14.5KB