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