滚动跑马灯计数组件（滚动距离驱动计数器，速度/方向/目标可调）

效果演示（真实可交互）

完整代码

实现思路：跑马灯内容复制一份形成无缝循环，用 requestAnimationFrame 按速度逐帧移动，同时累计「已滚动距离」；计数器 = 距离 ÷ 步长，其中步长 = 半程宽度 ÷ 目标值，满值后取模循环复位——滚动越快，计数越快，两者天然联动。

<div class="count" id="count">000000</div>
<div class="stage" id="stage">
  <div class="track" id="track">
    <span class="chip">✦ 粤喵组件站</span>
    <span class="chip">纯 CSS</span>
    <span class="chip">3D 动效</span>
    <span class="chip">✦</span>
  </div>
</div>

.stage { overflow: hidden; border-radius: 999px; background: #0f1117; padding: 14px 0; }
.track { display: flex; gap: 14px; width: max-content; will-change: transform; }
.chip  { padding: 10px 22px; border-radius: 999px; background: #1a2030;
         border: 1px solid #2f3a52; color: #cdd3e0; white-space: nowrap; }

const track = document.getElementById('track');
const stage = document.getElementById('stage');
track.innerHTML += track.innerHTML;          // 复制一份内容 → 无缝循环
const half = track.scrollWidth / 2;          // 半程宽度

let pos = 0, dist = 0, last = 0;
function tick(t) {
  const dt = Math.min((t - last) / 1000, 0.05);
  last = t;
  pos -= 90 * dt;                            // 90 = 速度 px/s
  if (pos <= -half) pos += half;             // 循环复位
  dist += 90 * dt;                           // 累计滚动距离
  const step = half / 888888;                // 步长 = 半程 / 目标值
  const count = Math.floor(dist / step) % 888889;
  document.getElementById('count').textContent =
    String(count).padStart(6, '0');
  track.style.transform = 'translateX(' + pos.toFixed(2) + 'px)';
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

参数说明

兼容性与性能

• 全程仅操作 transform 与文本节点，transform 由 GPU 合成，60fps 下开销可控
• 文本更新使用 textContent 而非 innerHTML，避免触发重解析
• 复制内容采用一次性的 innerHTML +=，仅初始化时执行一次
• 离开视口时通过 IntersectionObserver 取消动画帧，移动端显著省电
• 现代浏览器全支持；老浏览器仅退化为静止文本条，不影响内容展示
• 目标值上限 999999，计数以 6 位补零显示，视觉上类似里程表

常见问题

Q: 跑马灯首尾接不上、出现跳变怎么办？ 确保内容宽度超过容器宽度，且 gap 在复制前后保持一致。本实现直接复制整份内容再以半程宽度取模，天然无缝；若自定义内容，请保持两份完全一致。

Q: 计数与滚动不同步是什么原因？ 计数器由「距离」而非「帧数」驱动，理论上严格同步；若出现偏差，检查是否把 dt 换算成了秒（(t - last) / 1000），并限制最大 dt 防止切后台后跳帧。

Q: 如何让计数只增不减、不做循环？ 去掉取模运算 % (target + 1)，并把循环复位逻辑改为「仅内容回绕、距离继续累加」，即可变成一直增长的里程表效果。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，文字内容、颜色、速度、计数规则均可自由修改。