3分钟上手 Lenis 平滑滚动新手完整集成指南【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenisLenis 是一款轻量级平滑滚动库把浏览器原生滚动包了一层缓动让页面滚起来不生硬。核心包只有几 KB、零运行时依赖适合正在做滚动动画、视差效果或框架站点的开发者。为什么选 Lenis跑在原生滚动上Lenis 包的是浏览器自己的滚动position: sticky、锚点、键盘与无障碍支持照常工作不用自己重造滚动容器。控制体积整个库压缩后只有几 KB 且没有依赖放进任何项目都不心疼包体。一条动画循环驱动所有滚动竖屏、横屏、嵌套容器都能由一个实例驱动WebGL 场景和 GSAP 动画共用同一个 tick。官方适配 React 和 VueReactLenis、VueLenis组件直接包进页面实例通过上下文共享不用手动传 props。无构建也能用不搭工程时贴两行 script 标签加一行new Lenis()就能跑。3 分钟快速上手第 1 步安装。用任一包管理器装lenis一个命令完成npm i lenis装完得到核心库以及lenis/react、lenis/vue、lenis/snap等子包。第 2 步初始化并让循环自己跑。打开autoRaf库会自己驱动每一帧的更新省掉手写requestAnimationFrameimport Lenis from lenis import lenis/dist/lenis.css const lenis new Lenis({ autoRaf: true })第 3 步别忘了那行 CSS。官方样式表负责锁定根元素高度、接管scroll-behavior漏掉它页面会滚不动或滚两遍——这就是初始化后没反应最常见的原因。React 项目则更短一个组件套住内容即可import { ReactLenis } from lenis/react ReactLenis root /root表示实例基于html滚动之后任何组件都能用useLenis拿到它。参数速查参数类型默认值说明autoRafbooleanfalse是否自动运行每帧更新循环lerpnumber0.1线性插值强度0~1越小滚得越跟手durationnumber1.2滚动动画时长秒定义了lerp则失效easingfunction自定义指数缓动减速曲线决定滚动的手感orientationstringvertical滚动轴vertical或horizontalanchorsbooleanfalse开启后锚点链接自动平滑跳转wheelMultipliernumber1鼠标滚轮灵敏度倍率三个值得先弄懂的参数lerp手感的主旋钮。0.1是默认值调小如0.08响应更直接调大如0.2拖尾更长更滑。它和duration二选一写了lerp后duration就不生效。autoRaf不写的话必须自己在requestAnimationFrame循环里调lenis.raf(time)官方排障清单第一条就是查这个。anchors默认情况下 Lenis 会拦截锚点链接页面里有目录导航时建议设为true可以顺带传offset避开吸顶导航。典型场景GSAP 动画与滚动同步场景滚动驱动的视差、入场动画快速滚动时动画掉帧、和位置对不上。做法把lenis.raf挂进 GSAP 的 ticker让两边共用一个时钟lenis.on(scroll, ScrollTrigger.update) gsap.ticker.add((time) lenis.raf(time * 1000)) gsap.ticker.lagSmoothing(0)效果动画时间线和滚动位置绑定到同一 tick60fps 下也能保持同步不再出现动画追不上滚动。嵌套滚动容器与弹窗场景页面里有一个 modal 或侧栏自己可以滚结果轮子一动外层页面也跟着滚。做法给容器加一个属性Lenis 遇到它就交还给原生滚动一行 HTML 解决div>import lenis/dist/lenis.css const lenis new Lenis({ autoRaf: true })2. 弹窗里的内容滚动时外层跟着滚症状modal 内部滚动背景页面同时位移。原因轮子事件冒泡到了 Lenis 的监听目标两层都在消费。修复给弹窗根节点加data-lenis-prevent属性只花一行。3. 开了allowNestedScroll后帧率下降症状嵌套容器多的长页面滚动开始掉帧。原因该选项每次滚动事件都会遍历 DOM 树判断元素。修复改成显式标记性能开销归零div contenteditable="false">【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
3分钟上手 Lenis 平滑滚动：新手完整集成指南
3分钟上手 Lenis 平滑滚动新手完整集成指南【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenisLenis 是一款轻量级平滑滚动库把浏览器原生滚动包了一层缓动让页面滚起来不生硬。核心包只有几 KB、零运行时依赖适合正在做滚动动画、视差效果或框架站点的开发者。为什么选 Lenis跑在原生滚动上Lenis 包的是浏览器自己的滚动position: sticky、锚点、键盘与无障碍支持照常工作不用自己重造滚动容器。控制体积整个库压缩后只有几 KB 且没有依赖放进任何项目都不心疼包体。一条动画循环驱动所有滚动竖屏、横屏、嵌套容器都能由一个实例驱动WebGL 场景和 GSAP 动画共用同一个 tick。官方适配 React 和 VueReactLenis、VueLenis组件直接包进页面实例通过上下文共享不用手动传 props。无构建也能用不搭工程时贴两行 script 标签加一行new Lenis()就能跑。3 分钟快速上手第 1 步安装。用任一包管理器装lenis一个命令完成npm i lenis装完得到核心库以及lenis/react、lenis/vue、lenis/snap等子包。第 2 步初始化并让循环自己跑。打开autoRaf库会自己驱动每一帧的更新省掉手写requestAnimationFrameimport Lenis from lenis import lenis/dist/lenis.css const lenis new Lenis({ autoRaf: true })第 3 步别忘了那行 CSS。官方样式表负责锁定根元素高度、接管scroll-behavior漏掉它页面会滚不动或滚两遍——这就是初始化后没反应最常见的原因。React 项目则更短一个组件套住内容即可import { ReactLenis } from lenis/react ReactLenis root /root表示实例基于html滚动之后任何组件都能用useLenis拿到它。参数速查参数类型默认值说明autoRafbooleanfalse是否自动运行每帧更新循环lerpnumber0.1线性插值强度0~1越小滚得越跟手durationnumber1.2滚动动画时长秒定义了lerp则失效easingfunction自定义指数缓动减速曲线决定滚动的手感orientationstringvertical滚动轴vertical或horizontalanchorsbooleanfalse开启后锚点链接自动平滑跳转wheelMultipliernumber1鼠标滚轮灵敏度倍率三个值得先弄懂的参数lerp手感的主旋钮。0.1是默认值调小如0.08响应更直接调大如0.2拖尾更长更滑。它和duration二选一写了lerp后duration就不生效。autoRaf不写的话必须自己在requestAnimationFrame循环里调lenis.raf(time)官方排障清单第一条就是查这个。anchors默认情况下 Lenis 会拦截锚点链接页面里有目录导航时建议设为true可以顺带传offset避开吸顶导航。典型场景GSAP 动画与滚动同步场景滚动驱动的视差、入场动画快速滚动时动画掉帧、和位置对不上。做法把lenis.raf挂进 GSAP 的 ticker让两边共用一个时钟lenis.on(scroll, ScrollTrigger.update) gsap.ticker.add((time) lenis.raf(time * 1000)) gsap.ticker.lagSmoothing(0)效果动画时间线和滚动位置绑定到同一 tick60fps 下也能保持同步不再出现动画追不上滚动。嵌套滚动容器与弹窗场景页面里有一个 modal 或侧栏自己可以滚结果轮子一动外层页面也跟着滚。做法给容器加一个属性Lenis 遇到它就交还给原生滚动一行 HTML 解决div>import lenis/dist/lenis.css const lenis new Lenis({ autoRaf: true })2. 弹窗里的内容滚动时外层跟着滚症状modal 内部滚动背景页面同时位移。原因轮子事件冒泡到了 Lenis 的监听目标两层都在消费。修复给弹窗根节点加data-lenis-prevent属性只花一行。3. 开了allowNestedScroll后帧率下降症状嵌套容器多的长页面滚动开始掉帧。原因该选项每次滚动事件都会遍历 DOM 树判断元素。修复改成显式标记性能开销归零div contenteditable="false">【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
