React/Next.js实现Lenis平滑滚动教程 - 丝滑滚动效果完整指南
implement_lenis_scroll by jerrar670/surf-website
74 周安装量
GitHub安装命令
npx skills add https://github.com/jerrar670/surf-website --skill implement_lenis_scroll🇨🇳中文介绍
实现 Lenis 平滑滚动
此技能将指导您使用 @studio-freight/lenis（或较新的 lenis 包）为 React/Next.js 应用程序添加丝滑平滑的滚动效果。
前提条件
- 一个 React 或 Next.js 项目。
步骤
1. 安装依赖项
安装 Lenis 包。
npm install lenis
# 或者根据版本偏好
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}</>
}
🇺🇸English
Implement Lenis Smooth Scroll
This skill guides you through adding buttery smooth scrolling to a React/Next.js application using @studio-freight/lenis (or the newer lenis package).
Prerequisites
- A React or Next.js project.
Steps
1. Install Dependencies
Install the Lenis package.
npm install lenis
# OR depending on version preference
npm install @studio-freight/lenis
2. Create the Lenis Hook/Component
It's best to encapsulate Lenis in a reusable component or hook.
Option A: Global Component (Recommended for Next.js App Router) Create src/lib/lenis.ts or 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}</>
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
