js实现文字垂直向上间歇滚动

要实现文字垂直向上间歇滚动的效果，可以使用HTML、CSS和JavaScript结合来完成。以下是一个完整的示例，展示如何实现这一效果：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Scrolling Text</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-content" id="scrollContent">
            <p>这是第一行文本。</p>
            <p>这是第二行文本。</p>
            <p>这是第三行文本。</p>
            <p>这是第四行文本。</p>
            <p>这是第五行文本。</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.scroll-container {
    width: 200px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #fff;
    position: relative;
}

.scroll-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: transform 1s ease-in-out;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const scrollContent = document.getElementById('scrollContent');
    const scrollHeight = scrollContent.clientHeight;
    const containerHeight = document.querySelector('.scroll-container').clientHeight;

    function scrollText() {
        if (scrollContent.offsetTop <= -scrollHeight) {
            scrollContent.style.transform = `translateY(${containerHeight}px)`;
        } else {
            scrollContent.style.transform = `translateY(${scrollContent.offsetTop - 1}px)`;
        }
    }

    setInterval(scrollText, 20); // 每20毫秒滚动一次
});