Lenis

Lenis 是 darkroom.engineering 开源的平滑滚动库，以 requestAnimationFrame 替代原生滚动行为，解决 scroll-linked 动画异步导致的跳帧与延迟，单行 new Lenis() 即可启用，压缩后体积不足 4KB。

核心能力

Lenis 并非简单的 scroll-behavior 增强，而是通过 raf 循环接管滚动计算，使 WebGL、DOM 动画与滚动帧完全同步。官网列举了 7 项关键特性：

• 无代码集成: 提供 Framer 插件，无需写代码即可在 Framer 项目中使用
• 滚动吸附: 通过 lenis/snap 模块实现元素级吸附
• 任意容器: 可将 Lenis 绑定到任意 DOM 元素，不限于 window
• 双方向滚动: 同时支持水平与垂直滚动
• 无限滚动: 内置无限滚动模式，适合长列表或 feed
• 轻量: 压缩后体积小于 4KB

与动画框架的配合

Lenis 专为解决浏览器原生滚动与动画不同步而设计，官网明确说明其诞生初衷是“同步 WebGL 与 DOM”。第三方博客提供了与 GSAP ScrollTrigger 的集成示例：

• GSAP 同步: 通过 lenis.on('scroll', ScrollTrigger.update) 将滚动事件同步给 GSAP，再将 lenis.raf 加入 gsap.ticker，关闭 GSAP 的 lagSmoothing 避免延迟
• 自定义 raf 循环: 若不使用 autoRaf: true，可手动在 requestAnimationFrame 中调用 lenis.raf(time) 控制更新时机
• 事件系统: 监听 scroll 事件获取滚动数据（进度、方向、速度等），便于驱动其他动画逻辑

生态与行业采用

Lenis 最初是 darkroom.engineering 的内部工具，现已开源并成为多个知名项目的底层滚动方案。官网展示的合作方包括 Netflix、Rockstar Games（Grand Theft Auto VI）、Google Cloud、Unseen Studio、Lando Norris 等。Locomotive Scroll 也基于 Lenis 构建。

• 开源模式: 接受功能请求与赞助，GitHub 仓库开放 issue 与 PR
• 多框架支持: 官方维护 React 和 Vue 版本，源码仓库含独立包
• 第三方博客评价: 灏天阁技术博客称其为“告别卡顿”的解决方案，推荐用于长页面与复杂动画场景

常见问题

Q1：Lenis 与原生 scroll-behavior: smooth 有何本质区别？

A1：Lenis 使用 requestAnimationFrame 驱动滚动计算，而非浏览器原生平滑滚动。这使得滚动与 WebGL、DOM 动画在同一帧更新，避免异步导致的跳帧与延迟。同时 Lenis 提供事件系统、自定义缓动、方向控制等原生 smooth 不具备的能力。

Q2：Lenis 是否会影响页面可访问性？

A2：官网明确声明 Lenis 不劫持滚动条、不使用 CSS transforms，且保持无障碍特性。第三方博客也确认其未引入 accessibility trade-offs。

Q3：如何在 React 或 Vue 项目中使用 Lenis？

A3：官方在 GitHub 仓库中提供了独立的 React 和 Vue 包，路径分别为 packages/react 和 packages/vue。安装 npm i lenis 后可按框架文档导入对应组件或 hook。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。