JS实现丝滑文字滚动

公告栏、弹幕、股票 ticker......垂直文字滚动是前端最常见的动效之一。本文用纯原生代码拆解一条「克隆 + 逐帧滚动」的实现思路,涵盖布局、滚动、边界衔接三大要点,开箱即用,零依赖零配置。

效果预览

一、布局:一行标题 + 一条列表

HTML 极简骨架:

html 复制代码
<div class="container">
  <h1 class="title">最新公告</h1>
  <ul class="list">
    <li>把大象装冰箱总共分几步?</li>
    <li>1. 邓哥打开冰箱门</li>
    <li>2. 邓哥把大象放进去</li>
    <li>3. 邓哥关上冰箱门</li>
  </ul>
</div>

CSS 只做两件事:

  • .container 负责背景色与水平排版
  • .list 固定高度并隐藏溢出内容,为滚动做准备

二、核心算法:克隆 + 逐帧滚动

1.克隆首项 ------ 无缝衔接的秘诀

当最后一项滚动到可视区后,必须立即回到第一项而不闪屏。最简单做法:把第一项克隆一份追加到列表末尾。这样「最后一项」和「第一项」之间永远有一条平滑过渡。

js 复制代码
const list = document.querySelector('.list');
const firstItem = list.children[0].cloneNode(true);
list.appendChild(firstItem);

2.逐帧滚动 ------ 手写 Easing

浏览器原生 scrollTop 没有动画,我们用 setInterval 在 300 ms 内完成一次 30 px 的位移动画:

js 复制代码
let curIndex = 0;
const itemHeight = 30;
const duration = 300; // 动画耗时
const interval = 10;  // 每帧间隔
const dis = itemHeight / (duration / interval);

function moveNext() {
  let from = curIndex * itemHeight;
  let to = (curIndex + 1) * itemHeight;
  let timer = setInterval(() => {
    from += dis;
    if (from >= to) {
      clearInterval(timer);
      curIndex++;
      // 到达克隆项时瞬间归零,形成无缝循环
      if (curIndex === list.children.length - 1) {
        curIndex = 0;
        list.scrollTop = 0;
      }
    } else {
      list.scrollTop = from;
    }
  }, interval);
}

三、边界处理:回到起点不闪屏

curIndex 等于克隆项索引时,立即把 scrollTop 设为 0,人眼几乎察觉不到跳变,从而形成无限循环。

四、一行命令替换内容

只要保持每条文本高度一致,替换 <ul>innerHTML 即可热插播新公告,无需重启动画逻辑。

总结

「克隆第一项 + 逐帧滚动」是公告栏场景下最轻量的无限循环方案,可让文字像胶片一样永远滚动,不闪、不抖、不掉帧。

相关推荐
ANYOLY33 分钟前
Redis 面试宝典
数据库·redis·面试
珍宝商店39 分钟前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown39 分钟前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy40 分钟前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip2 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿2 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法3 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴3 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
ShineSpark3 小时前
C++面试11——指针与引用
c++·面试
lumi.3 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js