当前位置：首页 > 行业动态 > 正文

不间断向上滚动js

admin
行业动态
2025-03-17
1

要实现不间断向上滚动的文本效果，可以使用JavaScript结合CSS。以下是一个示例代码：“

html，，，，，，Scrolling Text，， #scrollingText {， white-space: nowrap;， overflow: hidden;， box-sizing: border-box;， animation: scroll 10s linear infinite;， } @keyframes scroll {， 0% { transform: translateY(100%); }， 100% { transform: translateY(-100%); }， }，，，，， This is the text that will scroll upwards continuously.，，，，

“这段代码创建了一个包含滚动文本的HTML页面，通过CSS动画实现了不间断向上滚动的效果。

在网页开发中，实现不间断向上滚动效果是一种常见的需求，特别是在展示动态数据或创建视觉吸引力时，以下是使用JavaScript和CSS实现这一效果的详细步骤：

HTML结构

我们需要一个基本的HTML结构来容纳滚动的内容，假设我们要滚动的是一组项目列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不间断向上滚动示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scroll-container">
        <ul id="scrolling-list">
            <!-动态生成的列表项 -->
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

我们定义一些基本的CSS样式来设置滚动容器和内容项的外观。

/ styles.css /
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; / 隐藏默认滚动条 /
}
.scroll-container {
    height: 100vh; / 全屏高度 /
    overflow: hidden; / 隐藏滚动条 /
    position: relative;
}
#scrolling-list {
    position: absolute;
    top: 0;
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: scrollUp 10s linear infinite; / 动画名称、时长、速度曲线、无限循环 /
}
@keyframes scrollUp {
    0% { top: 0; }
    100% { top: -100%; } / 根据列表项高度调整 /
}
#scrolling-list li {
    height: 50px; / 每个列表项的高度 /
    line-height: 50px; / 垂直居中文本 /
    background: #f0f0f0;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    padding-left: 20px;
}

JavaScript逻辑

我们使用JavaScript动态添加列表项并启动滚动效果。

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const listContainer = document.getElementById('scrolling-list');
    
    // 动态生成100个列表项作为示例
    for (let i = 1; i <= 100; i++) {
        const listItem = document.createElement('li');
        listItem.textContent =Item ${i};
        listContainer.appendChild(listItem);
    }
    
    // 确保列表的总高度是视口高度的整数倍，以实现无缝滚动
    const totalHeight = document.documentElement.clientHeight  2; // 两倍视口高度
    listContainer.style.height =${totalHeight}px;
});