js实现文字上下滚动效果

<div id="scrollContainer">
    <div id="scrollText">这是滚动的文字内容。</div>
</div>

#scrollContainer {
    position: relative;
    width: 300px;
    height: 100px;
    overflow: hidden;
}

#scrollText {
    position: absolute;
    white-space: nowrap;
}

function startScrolling() {
    const container = document.getElementById('scrollContainer');
    const text = document.getElementById('scrollText');
    let position = 0;
    const scrollSpeed = 1; // 调整滚动速度

    setInterval(() => {
        position -= scrollSpeed;
        text.style.top = position + 'px';

        // 当文字完全滚出容器时，重置位置
        if (-position >= text.clientHeight) {
            position = container.clientHeight;
        }
    }, 20); // 调整定时器间隔以控制滚动流畅度
}

window.onload = startScrolling;