Lenis 平滑滾動快速指南幾行代碼讓網(wǎng)站滾動不卡頓【免費(fèi)下載鏈接】lenisSmooth scroll as it should be項(xiàng)目地址: https://gitcode.com/GitHub_Trending/le/lenisLenis 是一款壓縮后僅幾 KB、零依賴的平滑滾動庫直接包裹瀏覽器原生滾動工作。讀完這篇你能用幾行代碼接入 Lenis 平滑滾動調(diào)出自己想要的滾動手感并把它和 GSAP、React、Vue、Three.js 串聯(lián)起來。為什么是 Lenis原生滾動一幀一幀地跳自己寫 transform 假滾動又會把 sticky、錨點(diǎn)、無障礙全搞壞。Lenis 走的是第三條路滾動位置仍是瀏覽器自己的position: sticky、錨點(diǎn)跳轉(zhuǎn)、讀屏軟件照常工作它只負(fù)責(zé)把每一幀算平滑。體積上核心庫壓縮后僅幾 KB無任何運(yùn)行時(shí)依賴。單個(gè)實(shí)例同時(shí)支持垂直、水平、嵌套容器滾動一個(gè)循環(huán)就能驅(qū)動 parallax、WebGL 場景和 GSAP ScrollTrigger不會出現(xiàn)多個(gè)動畫循環(huán)互相打架。React、Vue、Framer 有官方適配包lenis/snap 插件補(bǔ)齊分段吸附。 3 行代碼接入 Lenisimport Lenis from lenis import lenis/dist/lenis.css const lenis new Lenis({ autoRaf: true }) lenis.on(scroll, (e) { console.log(e.scroll, e.progress) })autoRaf: true表示由 Lenis 自己跑 requestAnimationFrame 循環(huán)否則你需要每幀手動調(diào)用lenis.raf(time)。那行 CSS 別省缺了它就會出現(xiàn)抖動、sticky 錯位這類布局問題。沒有構(gòu)建步驟的項(xiàng)目也可以只掛一個(gè) script 加 CSS 跑起來順便開autoToggle和anchors能自動處理彈窗和錨點(diǎn)跳轉(zhuǎn)。 調(diào)出你想要的滾動手感參數(shù)不多每個(gè)都有明確用途參數(shù)默認(rèn)值它是干什么的調(diào)了會怎樣duration1.2滾動緩動時(shí)長秒調(diào)大停得更慢lerp0.1慣性強(qiáng)度0–1調(diào)大滑行余韻更長easing內(nèi)置指數(shù)衰減緩動曲線換一條曲線手感全變wheelMultiplier/touchMultiplier1滾輪 / 觸摸靈敏度調(diào)小更細(xì)膩smoothWheeltrue滾輪是否平滑設(shè) false 回到即時(shí)滾動syncTouchfalse讓觸屏設(shè)備的滾動也平滑建議先只調(diào)lerp和duration手感定下來之后再碰倍率。? 讓 GSAP 動畫跟著滾動走GSAP ScrollTrigger 卡幀的典型原因是滾動和動畫跑在兩個(gè)時(shí)鐘上。把 Lenis 掛到 GSAP 的 ticker 上兩者就對齊到同一幀const lenis new Lenis() lenis.on(scroll, ScrollTrigger.update) gsap.ticker.add((time) lenis.raf(time * 1000)) gsap.ticker.lagSmoothing(0)time * 1000是因?yàn)?GSAP 用秒、Lenis 用毫秒lagSmoothing(0)關(guān)掉 GSAP 的滯后補(bǔ)償否則快速滾動后動畫會明顯追幀。這套 Lenis GSAP 集成搭好后scrub 視差、文字逐行浮現(xiàn)這類滾動驅(qū)動動畫就都順了。Lenis React 使用框架里更省心React 適配包給了ReactLenis組件和useLenis鉤子不用手動傳實(shí)例、也不用自己寫 raf 循環(huán)import { ReactLenis, useLenis } from lenis/react function App() { const lenis useLenis((l) console.log(l.progress)) return ( ReactLenis root / {/* 頁面內(nèi)容 */} / ) }useLenis的回調(diào)在每次滾動時(shí)執(zhí)行適合在里面讀l.progress驅(qū)動樣式。Vue 側(cè)有對等的VueLenisuseLenisNuxt 直接在 modules 里加lenis/nuxt。SSR 框架下記住一點(diǎn)實(shí)例只在客戶端初始化別讓它碰服務(wù)端環(huán)境。3D 場景把滾動映射給相機(jī)Three.js 項(xiàng)目里不需要研究源碼在scroll事件回調(diào)中取e.scroll當(dāng)前位置或e.progress0–1 進(jìn)度映射到相機(jī) z 軸或場景旋轉(zhuǎn)上就得到跟著手指走的 3D 滾動。配合上面 GSAP ticker 的同步方式3D 場景和 DOM 動畫跑在同一個(gè)循環(huán)里生態(tài)里還有 r3f-scroll-rig 這類現(xiàn)成插件可以直接用。?? 避坑清單癥狀元素抖動、sticky 錯位→ 原因沒引 lenis.css → 解法import lenis/dist/lenis.css癥狀移動端觸摸不響應(yīng)→ 原因平滑默認(rèn)只管滾輪或嵌套容器沖突 → 解法開syncTouch: true或給容器加data-lenis-prevent癥狀和第三方滾動庫打架→ 原因兩套滾動機(jī)制同時(shí)跑 → 解法第三方操作前后lenis.stop()/lenis.start()癥狀滾動時(shí)掉幀→ 原因scroll 回調(diào)里做了重計(jì)算 → 解法DOM 讀寫移出回調(diào)癥狀加載后滾動位置不對→ 原因DOM 沒就緒就初始化 → 解法等加載完再初始化確認(rèn)autoRaf: true資源與參與幾 KB 的體積換一套可控的滾動體驗(yàn)具體調(diào)校空間都在參數(shù)表里。細(xì)節(jié)看 README 與 packages/react/README.md、packages/snap/README.md發(fā)現(xiàn) bug 或想加功能直接提 issue 或 PR?！久赓M(fèi)下載鏈接】lenisSmooth scroll as it should be項(xiàng)目地址: https://gitcode.com/GitHub_Trending/le/lenis創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考