CSS3无限滚动列表实战：如何避免底部留白（附完整代码）

CSS3无限滚动列表实战：如何避免底部留白（附完整代码）

你是否曾在一个新闻资讯页面或一个实时数据仪表盘前，看着列表内容流畅地向上滚动，却突然在末尾卡顿一下，露出一片刺眼的空白区域？这种体验就像听一首好歌时突然跳针，瞬间破坏了所有的沉浸感。对于前端开发者而言，实现一个丝滑的无限滚动列表，尤其是纯CSS3驱动的动画效果，底部留白是一个绕不开的经典难题。它不仅仅是视觉上的瑕疵，更反映了对容器尺寸、动画路径和内容衔接等核心概念理解的深度。

今天，我们不谈空洞的理论，直接切入实战。我将带你一步步拆解这个问题的成因，并分享几种经过项目验证的解决方案，从最直观的“重复项填充法”到更优雅的“双列表拼接法”，每种方法都配有可直接运行的完整代码。我们的目标很明确：让列表的滚动如呼吸般自然，无感知地循环，彻底告别那令人尴尬的底部空白。无论你是正在优化后台管理系统的数据流展示，还是为移动端H5活动页打造吸引人的滚动公告，这篇文章都能为你提供即拿即用的思路和代码。

1. 问题根源：为什么会出现底部留白？

在开始动手修复之前，我们必须先搞清楚问题是怎么来的。很多开发者一上来就复制代码，却对背后的原理一知半解，导致稍作改动（比如改变容器高度）就再次陷入留白的困境。

核心矛盾在于：滚动动画的位移距离与容器内可视内容的匹配度。 当我们使用CSS3的 @keyframes 控制一个列表向上移动时，通常会设置一个终点状态，例如 top: -300px。这个 -300px 意味着列表整体向上移动了300像素。如果列表内容的总高度恰好也是300px，那么当动画结束时，列表的最后一项的底部刚好与容器的顶部对齐，视觉上列表就“离开”了可视区域。

那么，留白出现在哪里呢？想象一下动画的过程：列表从初始位置（top: 0）开始向上移动。在它完全移出容器之前，容器底部需要新的内容来填充。如果列表内容在动画结束前就已经全部“走完”了，那么从最后一项目标移出容器底部，到动画正式结束、列表跳回起点重新开始的这个时间差里，容器底部就没有任何内容可以展示，于是空白就出现了。

用一个简单的比喻：这就像放映一卷电影胶片。如果胶片的长度只够播放到主角说完最后一句话，那么在胶片循环回开头、重新加载的那几秒钟，银幕上必然是空白的。我们的目标就是让这卷“胶片”（列表）首尾相接，在末尾内容离开屏幕的瞬间，开头的内容已经无缝衔接上来，观众看不到换片的间隙。

注意：这里讨论的“无限滚动”主要指使用CSS动画实现的、视觉上连续不断的滚动效果，常用于公告、歌词、荣誉列表等静态或低频更新数据的展示。它与通过JavaScript监听滚动事件、动态加载数据的“无限滚动”（Infinite Scroll）是两种不同的技术场景。

为了更直观地理解，我们来看一个会产生留白的典型代码结构：

<div class="viewport" style="height: 150px; overflow: hidden;">
  <div class="scroll-list" style="animation: scroll 5s linear infinite;">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <!-- ... 假设共有10个项目 -->
    <div class="item">项目 10</div>
  </div>
</div>

<style>
@keyframes scroll {
  100% {
    transform: translateY(-100%);
  }
}
</style>

这段代码的意图是让列表向上移动自身高度的100%。但当最后一个“项目10”的顶部刚触及容器视口（viewport）的底部时，列表的移动还没有结束（动画才完成大部分），继续向上移动就会导致容器底部无内容可显示。

2. 解决方案一：重复项填充法（经典解法）

这是最直接、也最广为人知的解决方案。思路很简单：既然列表滚到最后会缺内容，那我们就在列表的末尾，额外追加一部分列表开头的项目。这样，当原始列表的最后一项开始离开视野时，这些追加的“重复项”正好进入视野，填补空白。

关键在于，要追加多少项？ 这不能凭感觉，需要一个精确的计算公式：

重复项数量 = ceil(容器视口高度 / 单个列表项高度)

这里使用 ceil（向上取整）是为了确保万无一失。因为如果容器高度不是列表项高度的整数倍，向下取整可能会导致填充高度不足，依然留下细小的空白。

让我们构建一个完整的例子。假设我们有一个用于展示实时赛果的滚动条：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛事成绩无限滚动 - 重复项填充法</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        .sports-ticker {
            width: 100%;
            max-width: 600px;
            height: 60px; /* 容器视口高度 */
            margin: 40px auto;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .ticker-list {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            animation: ticker-scroll 20s linear infinite;
        }

        .match-item {
            height: 60px; /* 单个列表项高度，必须明确 */
            display: flex;
            align-items: center;
            padding: 0 20px;
            color: #fff;
            font-family: 'Segoe UI', system-ui, sans-serif;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .match-item .teams {
            flex-grow: 1;
            font-size: 1.1em;
            font-weight: 500;
        }

        .match-item .score {
            font-size: 1.3em;
            font-weight: bold;
            color: #4cd964;
            min-width: 60px;
            text-align: center;
        }

        .match-item .status {
            font-size: 0.9em;
            padding: 4px 10px;
            border-radius: 12px;
            background-color: rgba(255, 255, 255, 0.15);
        }

        /* 关键动画：移动距离为原始列表总高度 */
        @keyframes ticker-scroll {
            100% {
                top: -600px; /* 10个原始项 * 60px = 600px */
            }
        }
    </style>
</head>
<body>
    <div class="sports-ticker">
        <div class="ticker-list">
            <!-- 原始列表 (10个项目) -->
            <div class="match-item"><span class="teams">湖人 vs 勇士</span><span class="score">112:108</span><span class="status">已结束</span></div>
            <div class="match-item"><span class="teams">热火 vs 凯尔特人</span><span class="score">98:102</span><span class="status">已结束</span></div>
            <div class="match-item"><span class="teams">篮网 vs 雄鹿</span><span class="score">105:101</span><span class="status">第三节</span></div>
            <div class="match-item"><span class="teams">皇马 vs 巴萨</span><span class="score">2:2</span><span class="status">中场</span></div>
            <div class="match-item"><span class="teams">曼联 vs 利物浦</span><span class="score">1:0</span><span class="status">60'</span></div>
            <div class="match-item"><span class="teams">中国 vs 日本</span><span class="score">3:1</span><span class="status">已结束</span></div>
            <div class="match-item"><span class="teams">纳达尔 vs 德约科维奇</span><span class="score">2-1</span><span class="status">第四盘</span></div>
            <div class="match-item"><span class="teams">法拉利 vs 红牛</span><span class="score">P1 / P3</span><span class="status">排位赛</span></div>
            <div class="match-item"><span class="teams">RNG vs T1</span><span class="score">2:1</span><span class="status">BO5</span></div>
            <div class="match-item"><span class="teams">阿瓦雷兹 vs 比沃尔</span><span class="score">-</span><span class="status">未开始</span></div>

            <!-- 重复项 (计算：ceil(60px / 60px) = 1，但为了更平滑，我们重复前5项) -->
            <div class="match-item"><span class="teams">湖人 vs 勇士</span><span class="score">112:108</span><span class="status">已结束</span></div>
            <div class="match-item"><span class="teams">热火 vs 凯尔特人</span><span class="score">98:102</span><span class="status">已结束</span></div>
            <div class="match-item"><span class="teams">篮网 vs 雄鹿</span><span class="score">105:101</span><span class="status">第三节</span></div>
            <div class="match-item"><span class="teams">皇马 vs 巴萨</span><span class="score">2:2</span><span class="status">中场</span></div>
            <div class="match-item"><span class="teams">曼联 vs 利物浦</span><span class="score">1:0</span><span class="status">60'</span></div>
        </div>
    </div>
</body>
</html>

这个方案的优缺点非常明显：

优点	缺点
实现简单，逻辑直观，易于理解和上手。	内容重复，如果列表项内容敏感或有唯一性要求（如ID），重复展示可能不合适。
纯CSS实现，性能开销极小，不依赖JavaScript。	DOM元素增多，重复项增加了页面节点数，在超长列表或移动端需注意性能。
兼容性好，在所有支持CSS3动画的浏览器中表现一致。	计算依赖固定高度，如果列表项高度不固定（如自适应内容），计算会变得复杂。

提示：在实际项目中，重复项的内容可以通过后端模板或前端JavaScript动态生成，避免在HTML中硬编码。对于高度不固定的情况，可以尝试使用 flex-shrink: 0 或 min-height 来给项目一个可控的基准高度。

3. 解决方案二：双列表拼接与动画重置法

如果你对重复项带来的语义重复或DOM冗余感到介意，那么可以尝试这种更“聪明”的方法。其核心思想是：准备两份完全相同的列表（A和B），将它们垂直拼接在一起（A在上，B在下）。当A列表完全滚动出视野时，整个容器瞬间跳回初始位置，由于B列表与A列表内容完全相同，且正好处于A列表初始的位置，用户完全感知不到这个“跳变”。

这个方法的关键在于对动画节奏的精准控制。我们需要让动画的“重置点”发生在A列表刚好完全离开、B列表刚好完全进入视野的那一帧。

下面是一个用于产品新特性循环展示的案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>产品特性循环展示 - 双列表法</title>
    <style>
        .feature-showcase {
            width: 100%;
            height: 400px;
            background-color: #f8f9fa;
            border-radius: 16px;
            overflow: hidden;
            position: relative;
        }

        .feature-track {
            position: absolute;
            width: 100%;
            /* 动画时间需要仔细调整。总移动距离为一份列表的高度 */
            animation: feature-move 25s linear infinite;
        }

        .feature-list {
            /* 单个列表，这里没有margin-bottom，因为两个列表是紧挨着的 */
        }

        .feature-card {
            height: 400px; /* 与容器等高，即一屏一项 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            text-align: center;
        }

        .feature-card h3 {
            font-size: 2em;
            margin-bottom: 20px;
            color: #1a1a1a;
        }

        .feature-card p {
            font-size: 1.2em;
            line-height: 1.6;
            color: #666;
            max-width: 700px;
        }

        /* 核心动画：移动距离为一份列表的总高度（即N个feature-card的高度和） */
        @keyframes feature-move {
            0% {
                transform: translateY(0);
            }
            /* 关键点：在动画结束前（如98%）完成移动，留出2%的时间做重置 */
            98% {
                transform: translateY(-100%); /* 向上移动一整份列表的高度 */
            }
            100% {
                transform: translateY(0);
            }
        }
        /* 通过animation-delay制造错位，让重置发生在视觉盲区 */
        .feature-track:nth-child(2) {
            animation-delay: -12.5s; /* 动画总时长25s的一半 */
        }
    </style>
</head>
<body>
    <div class="feature-showcase">
        <!-- 轨道1 -->
        <div class="feature-track">
            <div class="feature-list">
                <div class="feature-card" style="background-color: #e3f2fd;">
                    <h3>智能实时协作</h3>
                    <p>多人同时编辑文档，更改实时同步，毫秒级延迟。内置冲突解决算法，确保团队工作始终顺畅。</p>
                </div>
                <div class="feature-card" style="background-color: #f3e5f5;">
                    <h3>高级版本历史</h3>
                    <p>不仅记录每次保存，更可回溯到文档的任何一个字符的修改历史，并生成可视化时间线。</p>
                </div>
                <!-- 更多特性卡片... -->
            </div>
        </div>
        <!-- 轨道2：内容与轨道1完全一致 -->
        <div class="feature-track">
            <div class="feature-list">
                <div class="feature-card" style="background-color: #e3f2fd;">
                    <h3>智能实时协作</h3>
                    <p>多人同时编辑文档，更改实时同步，毫秒级延迟。内置冲突解决算法，确保团队工作始终顺畅。</p>
                </div>
                <div class="feature-card" style="background-color: #f3e5f5;">
                    <h3>高级版本历史</h3>
                    <p>不仅记录每次保存，更可回溯到文档的任何一个字符的修改历史，并生成可视化时间线。</p>
                </div>
                <!-- 重复的卡片... -->
            </div>
        </div>
    </div>
</body>
</html>

这种方法的精妙之处在于，它利用了 animation-delay 和两个并行的动画轨道。一个轨道从0%开始动画，另一个轨道从-50%的时间点开始（即动画已经开始了一半的状态）。当第一个轨道播放完毕、重置回起点的瞬间，第二个轨道正好处于动画的中间点，内容完美衔接，视觉上毫无破绽。它本质上是用空间（两份DOM）换取了时间上的无缝衔接。

与重复项填充法的对比：

对比维度	重复项填充法	双列表拼接法
DOM结构	单列表，尾部追加部分重复项。	双列表，完整重复，结构更对称。
动画控制	简单，一次线性动画到底。	稍复杂，需控制两个动画的相位差。
适用场景	列表项较多，滚动速度较快的“跑马灯”。	列表项较少，单屏展示内容较重的“轮播”。
内容更新	更新原始列表时，需同步更新重复项。	需要同时更新两个列表，维护成本翻倍。

4. 解决方案三：使用CSS scroll 行为与JavaScript微调（混合方案）

对于追求极致控制、且不排斥使用少量JavaScript的开发者，可以考虑结合CSS scroll-behavior 和 JS 监听滚动事件的混合方案。这不是纯CSS方案，但它提供了最高的灵活度，尤其是在处理动态内容或复杂交互时。

思路是：利用CSS overflow: scroll 或 auto 让容器可滚动，然后通过JavaScript在用户滚动（或自动滚动）到接近底部时，动态地将已经滚出视口顶部的列表项移动到列表末尾，并瞬间调整 scrollTop 值，制造循环的假象。

下面是一个模拟聊天记录无限滚动的简化示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>聊天记录无限滚动 - JS混合方案</title>
    <style>
        .chat-container {
            width: 300px;
            height: 400px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow-y: auto; /* 启用垂直滚动 */
            padding: 10px;
            font-family: sans-serif;
            scroll-behavior: smooth; /* 可选，使滚动更平滑 */
        }

        .message {
            padding: 8px 12px;
            margin-bottom: 10px;
            border-radius: 18px;
            max-width: 80%;
            line-height: 1.4;
        }

        .message.self {
            background-color: #0084ff;
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }

        .message.other {
            background-color: #e4e6eb;
            color: black;
            margin-right: auto;
            border-bottom-left-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="chatBox" class="chat-container">
        <!-- 消息将通过JavaScript动态插入 -->
    </div>

    <script>
        const chatBox = document.getElementById('chatBox');
        let messageCount = 1;

        // 初始化一些消息
        function initMessages() {
            for (let i = 0; i < 15; i++) {
                addMessage();
            }
        }

        // 添加一条新消息
        function addMessage() {
            const isSelf = Math.random() > 0.5;
            const msgDiv = document.createElement('div');
            msgDiv.className = `message ${isSelf ? 'self' : 'other'}`;
            msgDiv.textContent = `消息 ${messageCount++}`;
            chatBox.appendChild(msgDiv);
        }

        // 核心：监听滚动事件
        chatBox.addEventListener('scroll', function() {
            // 当向上滚动接近顶部时（模拟无限向上滚动）
            if (chatBox.scrollTop < 50) {
                // 1. 将最底部的几条消息移动到顶部
                const children = chatBox.children;
                const itemsToMove = 3; // 移动的数量
                for (let i = 0; i < itemsToMove; i++) {
                    const lastChild = children[children.length - 1 - i];
                    if (lastChild) {
                        chatBox.insertBefore(lastChild, children[0]);
                    }
                }
                // 2. 微妙地调整scrollTop，让用户感觉还在原来的位置
                chatBox.scrollTop += chatBox.children[itemsToMove].offsetHeight * itemsToMove;
            }

            // 当向下滚动接近底部时（模拟无限向下滚动/自动滚动）
            const threshold = chatBox.scrollHeight - chatBox.clientHeight - 50;
            if (chatBox.scrollTop > threshold) {
                // 1. 将顶部的几条消息移动到底部
                const children = chatBox.children;
                const itemsToMove = 3;
                for (let i = 0; i < itemsToMove; i++) {
                    const firstChild = children[i];
                    if (firstChild) {
                        chatBox.appendChild(firstChild);
                    }
                }
                // 2. 调整scrollTop，保持视觉连续性
                chatBox.scrollTop -= chatBox.children[0].offsetHeight * itemsToMove;
            }
        });

        // 模拟自动向上滚动（如新消息到来）
        let autoScrollInterval = setInterval(() => {
            // 每次滚动一点点
            chatBox.scrollTop += 1;
            // 也可以在这里触发上面的“接近底部”逻辑
        }, 50);

        // 初始化
        initMessages();
        // 开始时滚动到底部
        setTimeout(() => { chatBox.scrollTop = chatBox.scrollHeight; }, 100);
    </script>
</body>
</html>

这个方案的强大之处在于它的动态性和交互友好性。列表内容可以随时增删，滚动可以随时被用户中断，然后再平滑继续。它完美模拟了手机聊天软件那种似乎永远滚不到头的体验。

当然，它也有代价：

• 性能开销：需要频繁执行JavaScript和DOM操作，在低端设备上需谨慎优化。
• 实现复杂度：逻辑比纯CSS方案复杂得多，需要考虑边界情况（如快速滚动）。
• 并非纯视觉循环：它通过动态重组DOM来实现“无限”的错觉，严格来说内容顺序在变化。

5. 进阶技巧与性能优化

掌握了基本方法后，我们来看看如何让无限滚动列表更健壮、更高效。

1. 使用 transform: translateY() 替代 top 在现代浏览器中，使用 transform 属性来执行动画性能更优。因为 transform 的变化通常由GPU加速，且不会触发重排（reflow），只会触发重绘（repaint）。

/* 性能更优的写法 */
@keyframes smooth-scroll {
  100% {
    transform: translateY(-100%);
  }
}

2. 使用 will-change 属性提示浏览器 对于复杂的动画，可以给动画元素添加 will-change 属性，提前告知浏览器该元素可能发生变化，让浏览器提前优化。

.scroll-list {
  animation: scroll 10s linear infinite;
  will-change: transform; /* 提示浏览器transform属性将变化 */
}

注意：will-change 应谨慎使用。过度使用会消耗大量内存。最好只在元素即将动画时动态添加，动画结束后移除。

3. 处理动态高度内容 当列表项高度不固定时，前述的精确计算会失效。一个实用的策略是：

• 使用JavaScript在内容加载后，动态计算容器高度和项高度，然后计算出需要重复的项数或动画移动距离。
• 或者，采用“过填充”策略：重复足够多的项（比如重复整个列表），确保在任何情况下都能覆盖视口。虽然DOM元素更多，但保证了效果。

4. 暂停动画的交互优化 在用户与列表交互（如鼠标悬停）时暂停动画，能提升用户体验。

.scroll-list {
  animation: scroll 10s linear infinite;
  animation-play-state: running; /* 默认运行 */
}

.container:hover .scroll-list {
  animation-play-state: paused; /* 悬停时暂停 */
}

5. 减少重复项的DOM数量（针对重复项填充法） 如果原始列表很长，重复整个列表会显著增加DOM节点。一个优化技巧是：只重复恰好能填满一屏的项数，而不是重复所有项。计算方法是前面提到的 ceil(容器高度 / 单项高度)。即使原始列表有1000项，如果一屏只能显示5项，也只需要重复前5项即可。

实现一个完美的无限滚动效果，就像调试一个精密的机械表，每一个齿轮（容器、项、动画、时间）都必须严丝合缝。从理解底部留白的根本原因开始，选择最适合你项目场景的解决方案——是追求极致性能的纯CSS重复项法，是视觉无缝的双列表法，还是高度动态可控的JS混合方案。每一种方法都有其独特的适用场景和权衡点。在我自己的多个项目中，对于简单的公告栏，我首选方案一，因为它简单可靠；对于全屏产品轮播，方案二的视觉体验更胜一筹；而对于需要实时更新和强交互的聊天或日志面板，方案三提供的灵活性是不可替代的。记住，没有最好的方案，只有最合适的方案。多动手尝试，在真实的浏览器和设备上测试，你就能找到那个让列表“无限”流畅滚动的完美平衡点。