Skip to main content

基础使用

简介​

Lenis 是一个轻量级的 JavaScript 库，专注于实现 平滑滚动（Smooth Scrolling） 效果。它通过优化浏览器的原生滚动行为，提供更流畅的滚动体验，支持自定义缓动动画、滚动速度控制，并能与动画库（如 GSAP）结合使用。

核心作用：​

  • 平滑滚动：消除浏览器默认滚动的生硬感。
  • 性能优化：基于 requestAnimationFrame 实现，避免滚动卡顿。
  • 兼容性：支持现代浏览器（Chrome、Firefox、Safari 等）。
  • 扩展性：可与动画库（GSAP、ScrollTrigger）集成，实现复杂滚动动画。

image-20250305083931515

安装​

npm i lenis

CDN​

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/dist/lenis.min.js"></script>

基础使用​

初始化 Lenis​

import { ReactLenis, useLenis } from 'lenis/react'

function App() {
  const lenis = useLenis(({ scroll }) => {
    // called every scroll
  })

  return (
    <ReactLenis root>
      { /* content */ }
    </ReactLenis>
  )
}
import gsap from 'gsap'
import { ReactLenis } from 'lenis/react'
import { useEffect, useRef } from 'react'

function App() {
  const lenisRef = useRef()
  
  useEffect(() => {
    function update(time) {
      lenisRef.current?.lenis?.raf(time * 1000)
    }
  
    gsap.ticker.add(update)
  
    return () => gsap.ticker.remove(update)
  }, [])
  
  return (
    <ReactLenis options={{ autoRaf: false }} ref={lenisRef}>
      { /* content */ }
    </ReactLenis>
  )
}

监听滚动事件​

lenis.on('scroll', (e) => {
  console.log('当前滚动位置:', e.scroll);
});

控制滚动行为​

// 滚动到指定位置
lenis.scrollTo(1000); // 像素值
lenis.scrollTo('#section-2'); // 元素选择器

// 停止滚动
lenis.stop();

// 恢复滚动
lenis.start();