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 的是官方推荐的配套 CSSimport 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 个组件接入 LenisReact 封装在 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 必须falselerp插值强度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-snapCSS 原生吸附不支持需要吸附用 snap 插件。已知边界Safari 帧率上限 60fpsiframe 不转发 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），仅供参考