Lenis 平滑滚动使用指南：3 步接好，让滚动和动画同频-北京尧图网络

Lenis 平滑滚动使用指南3 步接好让滚动和动画同频【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenisLenis 是一个零依赖的小体积平滑滚动库接管浏览器原生滚动让整页滚动变顺滑。如果你的站点要做视差、分节吸附或滚动驱动动画它很合适。下面讲安装、调手感和常见坑。先认识一下几 KB骑在原生滚动上Lenis拉丁语里平滑的意思的做法很直接它不伪造一层假滚动而是监听 wheel 和 touch 事件把浏览器真实的滚动位置朝目标缓动过去。因为滚动始终是浏览器在做position: sticky、锚点链接、屏幕阅读器这些原生能力照常工作这也是它和很多替换滚动方案最大的区别。项目说明定位轻量平滑滚动库基于原生滚动不破坏可访问性核心能力滚轮与触摸平滑、scrollTo编程滚动、官方 snap 吸附插件、React / Vue 适配器适用场景营销官网、WebGL 滚动场景、GSAP 视差、分节式站点快速上手3 步跑通安装一行命令npm i lenis。然后初始化并驱动动画循环最短路径如下import Lenis from lenis // 让 Lenis 自己跑 requestAnimationFrame 循环 const lenis new Lenis({ autoRaf: true }) // 订阅滚动事件e 上带着 scroll、velocity、progress lenis.on(scroll, (e) { console.log(e.scroll, e.progress) })第三步是 CSS引入lenis/dist/lenis.css源码在 packages/core/lenis.css。它负责设置 html 高度、暂停滚动时锁住溢出漏掉会出现页面高度异常。到这一步页面已经能平滑滚动了。实战场景最常碰到的 3 个让滚动驱动 GSAP 视差场景是官网里随滚动移动的图片。关键点把 Lenis 挂到 GSAP 的 ticker 上两边共用同一个时钟否则滚动位置和动画会各走各的。const lenis new Lenis() // Lenis 每变一次位置就通知 ScrollTrigger 重算 lenis.on(scroll, ScrollTrigger.update) // 挂到 GSAP tickertime 单位是秒转成毫秒 gsap.ticker.add((time) { lenis.raf(time * 1000) }) gsap.ticker.lagSmoothing(0) // 关掉滞后平滑避免双重缓动就这几行不要再自己写一套 raf 循环两个时钟必然打架。给分节页面加吸附希望滚动停下来时咔哒对齐到某一节用官方插件 lenis/snap它和平滑滚动协作而不是对抗new Snap(lenis, { type: proximity })再对每个区块snap.addElement(section)。三种模式proximity靠近才吸、mandatory必落点、lock一次一步。页内锚点与编程滚动有目录导航或回到顶部按钮时不用自己算偏移。初始化传anchors: trueLenis 会接管锚点点击并平滑到位代码里直接lenis.scrollTo(#pricing, { offset: -80 })。目标可以是数字、选择器或元素。参数速查最常调的就是这几个参数什么时候调lerp默认 0.1手感太生硬就调大太飘就调小控制每帧向目标靠近的比例duration/easing想精确控制滚轮和 scrollTo 的动画曲线给其中一个就切换为按时间动画syncTouch移动端也想平滑时开启注意 iOS 16 以下可能不稳wheelMultiplier/touchMultiplier滚轮、触摸速度与你的内容节奏不匹配时默认都是 1anchors页内有锚点链接需要保持可用时开启allowNestedScroll页面存在内部滚动区弹窗、轮播时开启追求性能建议改用元素的data-lenis-prevent属性集成与避坑框架接入和三个坑React用官方适配器ReactLenis root包住页面实例的创建和销毁由 provider 接管任何组件里用useLenis拿到最新滚动状态import { ReactLenis, useLenis } from lenis/react function App() { useLenis((lenis) { // 随滚动把页头淡出progress 是 0~1 的进度 headerRef.current.style.opacity 1 - lenis.progress }) return ( ReactLenis root Header / Main / /ReactLenis ) }Vue / Nuxt同理vue-lenis root :options{ autoRaf: true }加useLenis()Nuxt 项目可直接装官方模块见 packages/vue/nuxt。适配器都在客户端初始化实例SSR 渲染阶段不会碰window无需额外处理。三个高频坑滚轮完全没反应。原因忘了驱动动画循环。解法传autoRaf: true或自己在每帧调lenis.raf(time)。页面顶部高度异常、暂停滚动时出现错位。原因没引入推荐 CSS。解法import lenis/dist/lenis.css。滚动中锚点链接失效。原因Lenis 默认拦截锚点默认跳转避免和平滑滚动冲突。解法传anchors: true只想豁免个别元素就给它加data-lenis-prevent属性。收尾记住一句话就够Lenis 是原生滚动缓动不是假滚动多数坑都源于忘了这一点。完整参数和方法表看官方 README更多玩法参考 playground/ 里的示例。【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Lenis 平滑滚动使用指南：3 步接好，让滚动和动画同频

相关推荐

PC 上免费运行 PS3 游戏：RPCS3 模拟器从零开始一站式指南

Bilibili-Evolved「隐藏首页轮播图」组件详解：选项体系、DOM 拦截与样式实现

微信小程序阅读系统开发全攻略：从登录到答辩

更多资讯

OpenDesign 中的 IBM Carbon 设计系统实现：从 `--cds-*` 令牌到组件级的完整落地指南

uni-app x waterflow 瀑布流组件完整指南：从属性配置到 C++ 回收复用原理

PaddleOCR JS 浏览器端 OCR SDK 开发指南：monorepo 构建流程、TypeScript 工程化与 npm 分发兼容实践

Slang 泛型与存在类型特化：基于 `coverage/specialize` 测试束的 IR 特化行为剖析

uni-app 的 uni_modules 插件规范：从目录结构、package.json 配置到插件开发与发布全指南

修复 IQ1_S_R4 / IQ1_M_R4 量化失败：ik_llama.cpp 中 GGML_ASSERT 崩溃的根因分析与边界处理方案

今日更新

校园网认证计费模式详解：AAA与代拨架构、原理及排障

Spring Boot+Vue垃圾分类毕设：分层、权限与排错实战

把 Cline 的 Base URL 改到 TaoToken 之后，DeepSeek 仍能修调试配置

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？