Lenis 快速上手指南：3 步给网页加上丝滑的平滑滚动-创锋一号

Lenis 快速上手指南：3 步给网页加上丝滑的平滑滚动

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

你有没有被浏览器原生滚动折磨过：滚轮一拨，页面"咯噔"一下跳到新位置，视差动画永远慢半拍。Lenis 是一款只有几 KB、零依赖的前端平滑滚动库，帮做网站的新手用最少的代码，把滚动调出"被弹簧缓冲过"的顺滑感。

🎯 什么场景值得上平滑滚动？

Lenis 的底层思路很克制：不伪造滚动，而是包裹浏览器原生滚动。这意味着 sticky 定位、锚点跳转、无障碍支持全都照常工作，不会把页面搞成"假滚动"。

它主要服务这几类站点：

滚动驱动的 WebGL / 3D 页面
视差、跟随类视觉动效
配合 GSAP ScrollTrigger 的时间轴动画
横向滚动与落地页

名字也点题：Lenis 在拉丁语里就是 "smooth" 的意思。

🚀 3 步跑通 Lenis 平滑滚动：从安装到生效

第一步，用包管理器装它（npm / yarn / pnpm 都行）：npm i lenis。

第二步，在 JS 入口初始化。autoRaf: true表示让它自己驱动动画循环，第二行 import 的是官方推荐的配套 CSS：

import Lenis from 'lenis' import 'lenis/dist/lenis.css' const lenis = new Lenis({ autoRaf: true })

第三步，刷新页面滚一下——到这里平滑滚动就跑起来了。

两个补充：想自己掌握帧循环，去掉autoRaf，改在requestAnimationFrame里每帧调lenis.raf(time)；没有构建工具的静态页，直接引一段浏览器脚本，一行new Lenis({ autoRaf: true })也能跑。

⚡ 联动 GSAP ScrollTrigger 的正确姿势

ScrollTrigger 玩家注意这里有个"抢方向盘"的坑：两边各跑各的帧循环，不同步就会抖。正确做法是把帧循环整体交给 GSAP 的时钟：

lenis.on('scroll', ScrollTrigger.update) gsap.ticker.add((time) => lenis.raf(time * 1000)) gsap.ticker.lagSmoothing(0)

三行各管一件事：同步滚动事件给 ScrollTrigger、每帧驱动 Lenis、关闭 GSAP 延迟平滑。初始化记得写autoRaf: false，别跑两个循环。

🧩 React 里 1 个组件接入 Lenis

React 封装在 packages/react/，核心是一个<ReactLenis>组件：

import { ReactLenis, useLenis } from 'lenis/react' <ReactLenis root />

它负责创建实例并注入上下文，root表示挂在<html>滚动容器上；子组件用useLenis钩子即可拿到实例，不用层层传 props。Vue / Nuxt 有对应包，滚动吸附则是独立插件，见 packages/snap/。

⚙️ 参数速查：lenis 使用方法的 5 个高频配置

配置项	作用	默认值	什么时候调
`autoRaf`	是否自动跑动画循环	`false`	纯 JS 项目设`true`；接 GSAP 必须`false`
`lerp`	插值强度（0~1），决定滚动的"弹性"	`0.1`	想要跟手调大，想要绵密调小
`duration`	平滑动画时长（秒）	`1.2`	和`easing`一起微调手感
`easing`	缓动函数	内置自定义曲线	想要特定手感时替换
`wrapper`	滚动容器	`window`	自定义容器（横向页面）必设

另外两个高频项：anchors: true让锚点链接也走平滑滚动；orientation可切horizontal做横向滚动。

⚠️ 避坑清单：生产环境别忽略的细节

CSS 别忘了：官方排错清单第一条就是引入配套 CSS，很多"滚动没反应"都栽在这。
循环别停：autoRaf: false时忘了调raf()，页面滚动会直接冻结。
嵌套滚动：allowNestedScroll: true最省事，但每次滚动都查 DOM 有性能开销；在意性能就用data-lenis-prevent属性精确豁免。
scroll-snap：CSS 原生吸附不支持，需要吸附用 snap 插件。
已知边界：Safari 帧率上限 60fps；iframe 不转发 wheel 事件，平滑滚动在其上方失效。
卸载时调destroy()：清理实例和全部事件，避免残留。

写在最后：文档、源码与贡献入口

一句话总结：Lenis 用几 KB 的代码换回原生滚动该有的顺滑，同时保住 sticky、锚点这些地基。

完整 API 表格见 README.md，设计思路见 MANIFESTO.md，想读懂实现可以从 packages/core/src/ 的核心源码看起，想参与项目按 CONTRIBUTING.md 的流程走即可。

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

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析