用 Lenis 给网站加上电影感平滑滚动：3 分钟上手的平滑滚动库教程

用 Lenis 给网站加上电影感平滑滚动：3 分钟上手的平滑滚动库教程

【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenis

Lenis 是一个 gzip 后只有几 KB、零依赖的轻量级平滑滚动库，它直接包装浏览器原生滚动，让网页像电影镜头一样顺滑地滑过去，而 sticky 定位、锚点跳转和无障碍访问全都照常工作。下面用最短的路径，把这个前端滚动动画方案接进你的项目。

先说清楚：平滑滚动到底解决了什么问题

很多网站滚一下"跳一下"，根源是原生滚动的步进节奏和页面动画没对上。Lenis（拉丁语里"smooth"的意思）的思路不是造一个假滚动条，而是接管滚轮和触摸事件，自己按帧插值出滚动位置，再把真实滚动交还给浏览器。这样做的好处很实际：

• 体积小到可以忽略，打包进任何项目都不心疼；
• position: sticky、hash 锚点、屏幕阅读器这些原生能力不丢；
• 竖直、水平、嵌套容器，一个实例都能管。

一条命令装好 Lenis

安装这一步没什么好讲的，包管理器三选一，跑一下就行：

npm i lenis

跑完后确认终端无报错、node_modules里多出了lenis目录，这一步就成功了。

最小可运行示例：new Lenis 之后要"喂帧"

这是整个 Lenis 教程的核心，就几行：

import Lenis from 'lenis' const lenis = new Lenis() function raf(time) { lenis.raf(time) requestAnimationFrame(raf) } requestAnimationFrame(raf)

原理很简单：Lenis 每帧需要一次raf调用来推进插值。保存文件、刷新页面，滚一下鼠标滚轮——页面应该缓缓"滑"过去，而不是生硬地一跳，对上了就跑起来就完事了。这里有个小技巧：不想手写这个循环的话，初始化时传autoRaf: true让它自己开。

⚙️ 最常调的三个配置项

参数列表看着长，日常真正会用到的就三个：

• lerp：插值强度，默认0.1。调小（如0.05）更绵长拖沓，调大（如0.2）更跟手；
• duration：平滑动画时长，单位秒。它和lerp调的是同一种"松紧感"，建议只动其中一个，别两个一起拧；
• wrapper：滚动容器，默认window。页面里有独立滚动的容器（比如侧边栏、全屏画廊）时，把那个元素传进去，让 Lenis 去管它。

另外建议把仓库里 packages/core/lenis.css 的规则一并引入页面，尤其是html.lenis相关的几条，能避免和scroll-behavior打架。

🎬 和 GSAP、React 项目怎么配合

• GSAP ScrollTrigger：把 Lenis 的scroll事件接到ScrollTrigger.update，再改用gsap.ticker驱动lenis.raf，让两者共用同一个时间轴即可，具体写法可参考仓库 README.md 的 Setup 部分；
• React / Vue：monorepo 里有官方适配包，用 Provider 包住应用、组件里取 Lenis 实例即可，用法详见 packages/react/README.md 和 packages/vue/README.md；
• 整屏吸附：想做出"一屏一屏"的吸附效果，可以直接试 packages/snap 插件，它和平滑滚动是配套的，不会互相拉扯。

落地前，先把这两件事做了

第一件：尊重用户的动效偏好。检测到prefers-reduced-motion或用户明确不想看动画时，调一次lenis.stop()切回原生滚动，几行代码就能换来一个不会"晕"掉用户的网站。第二件：别在scroll回调里干重活，把视差、进度条之类的计算挂到同一个raf循环里，滚动体验的稳定性会明显不一样。

跑通上面三步之后，建议下一步只动lerp一个参数，把0.05到0.2扫一遍手感，找到和你页面气质匹配的那个值——这比研究其他十几个配置项划算得多。

【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenis