SuperAPI AI 工具集

lenis

通用与其它

查看项目

更新于 10-16 00:04

技能介绍

用途:在实现 Lenis 平滑滚动,或把 Lenis 与 GSAP ScrollTrigger 集成时应用该技能,遵循官方推荐的最佳实践与性能建议。文档地址为 https://lenis.darkroom.engineering/。

主要能力与用法:需始终引入规定 CSS(如 html.lenis、html.lenis body { height: auto; }、.lenis.lenis-smooth { scroll-behavior: auto !important; }、.lenis.lenis-stopped { overflow: hidden; } 等)。基础用法为 import Lenis from 'lenis'; const lenis = new Lenis({ autoRaf: true });。与 GSAP 集成时注册 ScrollTrigger,执行 lenisInstance.on('scroll', ScrollTrigger.update),通过 gsap.ticker.add 调用 lenis.raf(time * 1000),并设置 gsap.ticker.lagSmoothing(0)。可用配置包括 duration、easing、orientation、gestureOrientation、smoothWheel、syncTouch、touchMultiplier;推荐 duration: 1.2、smoothWheel: true、syncTouch: false。可用 data-lenis-prevent、data-lenis-prevent-wheel、data-lenis-prevent-touch 阻止特定元素滚动;提供 scrollTo、stop、start 方法及 scroll 事件回调;卸载时调用 lenis.destroy()。

限制与注意:iframe 上平滑滚动会失效;Safari pre-M1 上 position: fixed 可能略有延迟;嵌套滚动容器需加 data-lenis-prevent;应禁用浏览器自带平滑滚动。常见问题包括未引入必需 CSS 导致滚动抖动、ScrollTrigger 未同步、元素无法滚动等。避免使用 syncTouch: true、同一页面多个 Lenis 实例、同时启用 autoRaf 与 GSAP ticker、忘记 destroy() 或直接动画滚动位置。