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 步接好，让滚动和动画同频
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），仅供参考