mcpField
I
implement_lenis_scroll

implement_lenis_scroll

github.com/jerrar670设计与 UI0479 次安装40 周前更新
代码仓库

关于 implement_lenis_scroll

为 React 或 Next.js 项目添加 Lenis 平滑滚动的实现指南，面向前端开发者。内容涵盖依赖安装、封装组件或 Hook、布局集成，以及滚动恢复和 GSAP ScrollTrigger 配合的注意事项。

主要功能

  1. 01安装 Lenis 依赖
  2. 02封装可复用组件或 Hook
  3. 03集成到 Next.js 布局
  4. 04检查滚动恢复行为
  5. 05配合 GSAP ScrollTrigger 更新

适用场景

  1. 01为 React 应用加入平滑滚动
  2. 02在 Next.js App Router 中接入 Lenis
  3. 03将 Lenis 与 GSAP ScrollTrigger 配合使用

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jerrar670/surf-website --skill implement_lenis_scroll

安装后在 Claude Code 中输入/implement_lenis_scroll确认已加载。

详细介绍

实现 Lenis 平滑滚动

本技能将指导你使用 @studio-freight/lenis（或较新的 lenis 包）为 React/Next.js 应用添加丝滑的平滑滚动效果。

前提条件

  • 一个 React 或 Next.js 项目。

步骤

1. 安装依赖

安装 Lenis 包。

npm install lenis
# OR depending on version preference
npm install @studio-freight/lenis
2. 创建 Lenis Hook/组件

最好将 Lenis 封装在可复用的组件或 Hook 中。

选项 A：全局组件（推荐用于 Next.js App Router） 创建 src/lib/lenis.ts 或 src/components/SmoothScroll.tsx。

// src/components/SmoothScroll.tsx
'use client'

import { ReactNode, useEffect } from 'react'
import Lenis from 'lenis'

export default function SmoothScroll({ children }: { children: ReactNode }) {
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      orientation: 'vertical',
      gestureOrientation: 'vertical',
      smoothWheel: true,
    })

    function raf(time: number) {
      lenis.raf(time)
      requestAnimationFrame(raf)
    }

    requestAnimationFrame(raf)

    return () => {
      lenis.destroy()
    }
  }, [])

  return <>{children}</>
}
3. 集成到布局中

使用该组件包裹主应用或布局内容。

Next.js App Router（layout.tsx）：

import SmoothScroll from '@/components/SmoothScroll'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SmoothScroll>
          {children}
        </SmoothScroll>
      </body>
    </html>
  )
}

最佳实践

  • 性能：确保优化 requestAnimationFrame。
  • 滚动恢复：Lenis 通常会处理此问题，但请确认 Next.js 中的 scrollRestoration 是否按预期工作。
  • GSAP 集成：如果使用 ScrollTrigger，请确保在 Lenis 滚动时更新 ScrollTrigger。 
    // Inside useEffect
// lenis.on('scroll', ScrollTrigger.update)
// gsap.ticker.add((time)=>{lenis.raf(time * 1000)})
// gsap.ticker.lagSmoothing(0)

评论

支持 Markdown