Lenis：轻量级平滑滚动库技术文档

Lenis：轻量级平滑滚动库技术文档

lenis How smooth scroll should be 项目地址: https://gitcode.com/gh_mirrors/le/lenis

---

一、安装指南

通过npm安装

在终端执行以下命令来安装Lenis库：

npm i lenis

之后，在你的JavaScript文件中导入Lenis：

import Lenis from 'lenis';

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

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

二、项目使用说明

基础设置

初始化Lenis并在页面上实现基本的平滑滚动功能：

const lenis = new Lenis();

lenis.on('scroll', (e) => {
  console.log(e);
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

记得添加必要的CSS来增强体验：

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* 其他相关CSS规则... */

高级集成：GSAP ScrollTrigger

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

const lenis = new Lenis();
lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add(time => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

在React中的应用

查看具体的文档位于Lenis的React组件说明。

三、项目API使用文档

Lenis提供了丰富可配置的实例设置，例如：

• wrapper: 滚动容器，默认为window。
• smoothWheel: 是否启用鼠标滚轮平滑，默认开启。
• easing: 平滑滚动使用的缓动函数，默认提供自定义函数，也可选择Easings.net上的任何缓动函数。
• 更多选项见源码注释或官方文档。

你可以根据需要调整这些设置以适应具体项目需求。

四、详细安装方式

除了上述基础安装方法，确保你的开发环境支持ES模块或CommonJS模块。对于传统项目，可以直接链接到CDN上的最小化版本进行快速集成。对于现代前端工作流程，通过npm包管理器集成将允许更好地利用构建工具进行打包优化。

确保在项目中正确导入Lenis后，按照基本设置指导进行初始化，并根据项目需求调用相应的方法或设置参数。

请注意，当在生产环境中部署时，考虑性能优化，比如确保不需要的脚本加载不会影响首屏加载速度。

最后，鼓励对Lenis的贡献，无论是通过赞助还是提交PR来改进这个开源项目，一起让网页滚动变得更加流畅和吸引人。

lenis How smooth scroll should be 项目地址: https://gitcode.com/gh_mirrors/le/lenis