Lenis：轻量级平滑滚动引擎，提升网页交互体验

功能概述：重新定义平滑滚动

Lenis 是一个轻量级的平滑滚动库，旨在解决传统网页滚动体验不佳的问题。它通过精确的数学计算和高效的动画处理，实现了丝滑般的滚动效果，让用户在浏览网页时获得更加舒适和愉悦的体验。无论是简单的页面滚动，还是复杂的交互场景，Lenis 都能轻松应对，为开发者提供了强大而灵活的工具。

---

快速上手：3 步实现平滑滚动

安装 Lenis

你可以通过 npm 安装 Lenis 库，在终端执行以下命令：

npm i lenis

如果你不使用构建系统，也可以通过 CDN 直接在 HTML 中引入：

<script src="https://unpkg.com/lenis@1.1.4/dist/lenis.min.js"></script>

初始化 Lenis

在你的 JavaScript 文件中导入并初始化 Lenis：

// 导入 Lenis
import Lenis from 'lenis';

// 创建 Lenis 实例
const lenis = new Lenis();

// 监听滚动事件
lenis.on('scroll', (e) => {
  console.log(e); // 输出滚动相关信息
});

// 启动滚动动画
function raf(time) {
  lenis.raf(time); // 传入时间参数，驱动滚动动画
  requestAnimationFrame(raf); // 循环调用，保持动画持续运行
}

requestAnimationFrame(raf);

添加必要 CSS

为了增强滚动体验，需要添加以下 CSS 规则：

html.lenis, html.lenis body {
  height: auto; /* 确保页面高度自适应 */
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important; /* 覆盖默认滚动行为 */
}

---

场景应用：行业实践案例

电商商品页

在电商商品页中，Lenis 可以实现商品图片的平滑切换和页面的流畅滚动。当用户浏览商品详情时，平滑的滚动效果能够让用户更加专注于商品信息，提升购物体验。例如，在商品图片展示区域，通过 Lenis 实现图片的平滑过渡，让用户在滑动过程中感觉更加自然。

新闻阅读

对于新闻阅读类网站，Lenis 可以提供舒适的阅读体验。用户在上下滚动阅读新闻内容时，平滑的滚动效果减少了视觉疲劳，使阅读更加轻松。特别是在长篇新闻中，Lenis 能够保持滚动的稳定性和连贯性，让用户能够专注于内容本身。

数据可视化

在数据可视化页面中，Lenis 可以与图表交互相结合，实现数据的动态展示。当用户滚动页面时，图表可以随着滚动进度平滑地更新数据展示，增强数据的可读性和交互性。例如，在展示销售数据趋势时，随着页面滚动，图表可以平滑地展示不同时间段的数据变化。

---

深度配置：自定义滚动体验

Lenis 提供了丰富的配置选项，你可以根据项目需求进行自定义设置。以下是一些常用的配置项：

配置项	说明	适用场景
wrapper	滚动容器，默认为 window	当需要在特定容器内实现滚动效果时使用，如自定义滚动区域
smoothWheel	是否启用鼠标滚轮平滑，默认开启	希望鼠标滚轮滚动更加平滑的场景
easing	平滑滚动使用的缓动函数，默认提供自定义函数	需要调整滚动加速度变化曲线的场景，可根据需求选择不同的缓动函数

[!TIP] 缓动函数（控制滚动加速度变化的数学曲线）可以选择 Easings.net 上的任何缓动函数，以实现不同的滚动效果。

---

扩展生态：与其他工具集成

与 GSAP ScrollTrigger 集成

对于更复杂的动画同步，可以结合使用 Lenis 与 GSAP：

const lenis = new Lenis();
lenis.on('scroll', ScrollTrigger.update); // 当滚动时更新 ScrollTrigger

gsap.ticker.add(time => {
  lenis.raf(time * 1000); // 将 GSAP 的时间转换为 Lenis 需要的时间格式
});
gsap.ticker.lagSmoothing(0); // 关闭 GSAP 的滞后平滑

在 React 中的应用

Lenis 提供了 React 组件，方便在 React 项目中使用。你可以查看项目中 packages/react 目录下的相关文件，了解具体的使用方法。

---

常见误区：避免集成错误

误区一：未正确初始化滚动循环

错误表现：滚动效果不流畅或无法正常工作。 解决方案：确保正确调用 requestAnimationFrame 来启动滚动循环，并且在循环中调用 lenis.raf(time)。

误区二：忽略 CSS 配置

错误表现：滚动效果不符合预期，可能出现抖动或跳跃。 解决方案：务必添加必要的 CSS 规则，确保页面高度自适应和滚动行为的正确设置。

误区三：过度配置参数

错误表现：滚动性能下降，出现卡顿。 解决方案：只配置必要的参数，避免过度自定义导致性能问题。对于大多数项目，默认配置已经能够满足需求。

---

Lenis 以其5KB的极小包体积，为网页带来了卓越的平滑滚动体验。无论是简单的个人网站，还是复杂的企业级应用，Lenis 都能成为你提升用户体验的得力助手。如果你想为你的项目添加丝滑的滚动效果，不妨尝试使用 Lenis，让网页交互更加出色。