implement_lenis_scroll

用途

该技能用于指导开发者在 React 或 Next.js 应用中实现 Lenis 平滑滚动效果。它围绕 @studio-freight/lenis（或较新的 lenis 包）展开，目标是让页面滚动更加平滑。

前置条件

需要已有一个 React 或 Next.js 项目。

主要能力

• 安装 Lenis 依赖：提供 npm install lenis 与 npm install @studio-freight/lenis 两种安装命令，按版本偏好选择。
• 封装可复用的 Lenis 组件：建议将 Lenis 封装为可复用组件或 Hook，并给出全局组件写法（推荐用于 Next.js App Router），文件可放在 src/lib/lenis.ts 或 src/components/SmoothScroll.tsx。
• 提供完整示例代码：组件中使用 'use client'，通过 useEffect 创建 Lenis 实例，配置 duration: 1.2、easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))、orientation: 'vertical'、gestureOrientation: 'vertical'、smoothWheel: true；用 requestAnimationFrame 循环调用 lenis.raf(time)，并在清理函数中调用 lenis.destroy()。
• 集成到布局：将应用或布局内容包裹在该组件中，示例为 Next.js App Router 的 layout.tsx，在 <body> 内使用 <SmoothScroll>{children}</SmoothScroll>。

使用方式

1. 安装依赖。
2. 创建 Lenis 封装组件或 Hook。
3. 将其包裹在应用或布局的主内容外层。

适用场景

适用于需要在 React 或 Next.js 项目中添加平滑滚动效果的场景，尤其是 Next.js App Router 项目。

最佳实践与限制

• 性能：确保 requestAnimationFrame 得到优化。
• 滚动恢复：Lenis 通常会处理该问题，但需在 Next.js 中验证 scrollRestoration 是否按预期工作。
• GSAP 集成：若使用 ScrollTrigger，需在 Lenis 滚动时更新 ScrollTrigger，示例包括 lenis.on('scroll', ScrollTrigger.update)、gsap.ticker.add((time)=>{lenis.raf(time * 1000)})、gsap.ticker.lagSmoothing(0)。
• 文档未提供关于收费、价格、平台支持范围或其他功能的具体说明，暂未提供。