告别卡顿！Lenis 带你体验丝滑滚动

有没有遇到过网页滚动卡顿、动画不同步或者视差效果不流畅的问题？作为一名前端工程师，我最近在项目中发现了一款神奇的库——Lenis，它彻底改变了我的滚动体验。

什么是 Lenis？

官网是这样介绍它的：顺滑滚动，就该如此。

Lenis 是由 Darkroom Engineering 团队开发的 JavaScript 平滑滚动库。

我在使用中发现，它通过替代浏览器默认滚动行为，实现基于缓动函数的平滑滚动效果。与原生 scroll-behavior: smooth 不同，Lenis 使用 requestAnimationFrame 进行滚动计算，使长页面和动画场景下的滚动体验更流畅、可控。

核心特点

高性能，适合长页面或复杂动画
轻量级，压缩后体积仅几 KB
易于集成，支持原生 JS、React、Vue 等
可自定义滚动方向、缓动函数、滚动容器
提供丰富的事件系统，方便与动画同步
......

使用

安装

npm i lenis

基本用法

import Lenis from "lenis";

// 初始化 Lenis
const lenis = new Lenis({
  autoRaf: true, // 自动使用 requestAnimationFrame 更新滚动
});

// 监听滚动事件，并打印事件数据
lenis.on("scroll", (e) => {
  console.log(e);
});

自定义 raf 循环

// 初始化 Lenis
const lenis = new Lenis();

// 使用 requestAnimationFrame 持续更新滚动
function raf(time) {
  lenis.raf(time); // 调用 Lenis 的 raf 方法更新滚动状态
  requestAnimationFrame(raf); // 下一帧继续调用 raf
}

requestAnimationFrame(raf); // 启动自定义的 raf 循环

与 GSAP ScrollTrigger 结合

// 初始化一个新的 Lenis 实例，实现平滑滚动
const lenis = new Lenis();

// 将 Lenis 的滚动与 GSAP 的 ScrollTrigger 插件同步
lenis.on("scroll", ScrollTrigger.update);

// 将 Lenis 的 requestAnimationFrame (raf) 方法添加到 GSAP 的 ticker 中
// 确保 Lenis 的平滑滚动动画在每一帧 GSAP 更新时都能刷新
gsap.ticker.add((time) => {
  lenis.raf(time * 1000); // 将时间从秒转换为毫秒
});

// 禁用 GSAP 的延迟平滑，以防滚动动画出现延迟
gsap.ticker.lagSmoothing(0);

写在最后

Lenis 是一款轻量、高性能且易于集成的平滑滚动库。无论是简单页面滚动优化，还是复杂动画、WebGL 交互场景，都能提供流畅、自然的滚动体验。对于前端工程师来说，它是一个值得掌握的工具。

告别卡顿！Lenis 带你体验丝滑滚动

什么是 Lenis？

核心特点

使用

安装

基本用法

自定义 raf 循环

与 GSAP ScrollTrigger 结合

写在最后

相关资源

源码

Vue 版本

React 版本

在线体验