Repolode
提交项目
darkroomengineering

darkroomengineering/lenis

一个轻量、无依赖的网页平滑滚动库，在原生滚动基础上提供缓动动画效果。

在 GitHub 查看官网
Star
17,120
Fork
779
未关闭 Issue
33
最近提交
9天前

这是什么？

Lenis 是一个用于网页的平滑滚动库。它接管鼠标滚轮和触摸输入，并将滚动位置以缓动动画逐步逼近目标，让页面滚动更顺滑。它是在浏览器原生滚动之上工作的，而不是替代原生滚动，因此 position: sticky、锚点链接和无障碍行为仍然可用。

单个实例即可支持纵向、横向及嵌套滚动。库提供事件和逐帧调用的 raf 方法，便于 WebGL 场景、GSAP ScrollTrigger 和视差效果与滚动位置保持同步。官方提供 React、Vue 和 Framer 适配包，另有 snap 插件用于区块对齐。可配置持续时间、缓动或 lerp、减少动态效果偏好，并可通过 data 属性或 prevent 回调为单个元素排除平滑滚动。

可通过 npm 安装，也可以直接通过 CDN 脚本引入，无需构建。已知限制包括不支持 CSS scroll-snap、无法穿透 iframe 传递滚轮事件，以及 Safari 上帧率上限为 60fps。

核心功能

  • 01零运行时依赖，体积小
  • 02单个实例即可实现纵向、横向及嵌套滚动的平滑效果
  • 03保留 position: sticky、锚点链接等原生滚动行为
  • 04可与 WebGL 场景、GSAP ScrollTrigger 和视差效果同步
  • 05提供 React、Vue、Framer 官方适配包及 snap 插件

适用场景

  • 为营销页或作品集网站添加平滑滚动效果
  • 将 Three.js 或 WebGL 场景与页面滚动同步
  • 结合 GSAP ScrollTrigger 实现滚动驱动动画
  • 在弹窗或嵌套面板中创建平滑滚动区域

快速上手

  1. 1

    使用 npm 安装 Lenis

    npm i lenis
  2. 2

    在代码中导入 Lenis

    import Lenis from 'lenis'
  3. 3

    创建启用 autoRaf 的实例

使用前须知

  • 除非使用 autoRaf 或无代码方式，否则需要自行将 Lenis 接入你的滚动和动画循环。

标签

#smooth-scroll#javascript#typescript#animation#scroll#react#vue#webgl#darkroom-engineering#performance

常见问题

lenis 是什么？
一个轻量、无依赖的网页平滑滚动库，在原生滚动基础上提供缓动动画效果。 Lenis 是一个用于网页的平滑滚动库。它接管鼠标滚轮和触摸输入，并将滚动位置以缓动动画逐步逼近目标，让页面滚动更顺滑。它是在浏览器原生滚动之上工作的，而不是替代原生滚动，因此 position: sticky、锚点链接和无障碍行为仍然可用。
lenis 可以免费使用吗？用的什么许可证？
lenis 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
lenis 还在维护吗？
活跃维护中。lenis 最近一次提交是在 2026年10月29日。
lenis 适合用来做什么？
为营销页或作品集网站添加平滑滚动效果 将 Three.js 或 WebGL 场景与页面滚动同步 结合 GSAP ScrollTrigger 实现滚动驱动动画 在弹窗或嵌套面板中创建平滑滚动区域
lenis 怎么安装和运行？
使用 npm 安装 Lenis: npm i lenis 在代码中导入 Lenis: import Lenis from 'lenis' 创建启用 autoRaf 的实例
在哪里获取 lenis？
源代码和安装说明在 GitHub 上：https://github.com/darkroomengineering/lenis

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目