Lenis 平滑滚动快速指南：几行代码让网站滚动不卡顿

Lenis 平滑滚动快速指南几行代码让网站滚动不卡顿【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenisLenis 是一款压缩后仅几 KB、零依赖的平滑滚动库直接包裹浏览器原生滚动工作。读完这篇你能用几行代码接入 Lenis 平滑滚动调出自己想要的滚动手感并把它和 GSAP、React、Vue、Three.js 串联起来。为什么是 Lenis原生滚动一帧一帧地跳自己写 transform 假滚动又会把 sticky、锚点、无障碍全搞坏。Lenis 走的是第三条路滚动位置仍是浏览器自己的position: sticky、锚点跳转、读屏软件照常工作它只负责把每一帧算平滑。体积上核心库压缩后仅几 KB无任何运行时依赖。单个实例同时支持垂直、水平、嵌套容器滚动一个循环就能驱动 parallax、WebGL 场景和 GSAP ScrollTrigger不会出现多个动画循环互相打架。React、Vue、Framer 有官方适配包lenis/snap 插件补齐分段吸附。 3 行代码接入 Lenisimport Lenis from lenis import lenis/dist/lenis.css const lenis new Lenis({ autoRaf: true }) lenis.on(scroll, (e) { console.log(e.scroll, e.progress) })autoRaf: true表示由 Lenis 自己跑 requestAnimationFrame 循环否则你需要每帧手动调用lenis.raf(time)。那行 CSS 别省缺了它就会出现抖动、sticky 错位这类布局问题。没有构建步骤的项目也可以只挂一个 script 加 CSS 跑起来顺便开autoToggle和anchors能自动处理弹窗和锚点跳转。 调出你想要的滚动手感参数不多每个都有明确用途参数默认值它是干什么的调了会怎样duration1.2滚动缓动时长秒调大停得更慢lerp0.1惯性强度0–1调大滑行余韵更长easing内置指数衰减缓动曲线换一条曲线手感全变wheelMultiplier/touchMultiplier1滚轮 / 触摸灵敏度调小更细腻smoothWheeltrue滚轮是否平滑设 false 回到即时滚动syncTouchfalse让触屏设备的滚动也平滑建议先只调lerp和duration手感定下来之后再碰倍率。✨ 让 GSAP 动画跟着滚动走GSAP ScrollTrigger 卡帧的典型原因是滚动和动画跑在两个时钟上。把 Lenis 挂到 GSAP 的 ticker 上两者就对齐到同一帧const lenis new Lenis() lenis.on(scroll, ScrollTrigger.update) gsap.ticker.add((time) lenis.raf(time * 1000)) gsap.ticker.lagSmoothing(0)time * 1000是因为 GSAP 用秒、Lenis 用毫秒lagSmoothing(0)关掉 GSAP 的滞后补偿否则快速滚动后动画会明显追帧。这套 Lenis GSAP 集成搭好后scrub 视差、文字逐行浮现这类滚动驱动动画就都顺了。Lenis React 使用框架里更省心React 适配包给了ReactLenis组件和useLenis钩子不用手动传实例、也不用自己写 raf 循环import { ReactLenis, useLenis } from lenis/react function App() { const lenis useLenis((l) console.log(l.progress)) return ( ReactLenis root / {/* 页面内容 */} / ) }useLenis的回调在每次滚动时执行适合在里面读l.progress驱动样式。Vue 侧有对等的VueLenisuseLenisNuxt 直接在 modules 里加lenis/nuxt。SSR 框架下记住一点实例只在客户端初始化别让它碰服务端环境。3D 场景把滚动映射给相机Three.js 项目里不需要研究源码在scroll事件回调中取e.scroll当前位置或e.progress0–1 进度映射到相机 z 轴或场景旋转上就得到跟着手指走的 3D 滚动。配合上面 GSAP ticker 的同步方式3D 场景和 DOM 动画跑在同一个循环里生态里还有 r3f-scroll-rig 这类现成插件可以直接用。⚠️ 避坑清单症状元素抖动、sticky 错位→ 原因没引 lenis.css → 解法import lenis/dist/lenis.css症状移动端触摸不响应→ 原因平滑默认只管滚轮或嵌套容器冲突 → 解法开syncTouch: true或给容器加data-lenis-prevent症状和第三方滚动库打架→ 原因两套滚动机制同时跑 → 解法第三方操作前后lenis.stop()/lenis.start()症状滚动时掉帧→ 原因scroll 回调里做了重计算 → 解法DOM 读写移出回调症状加载后滚动位置不对→ 原因DOM 没就绪就初始化 → 解法等加载完再初始化确认autoRaf: true资源与参与几 KB 的体积换一套可控的滚动体验具体调校空间都在参数表里。细节看 README 与 packages/react/README.md、packages/snap/README.md发现 bug 或想加功能直接提 issue 或 PR。【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考