Astro 中使用 Lenis 增加鼠标滚动阻尼感

在移动端触控交互中，惯性滚动带来的丝滑体验已成为标配，但鼠标滚轮受限于机械结构，滚动时难免产生生硬的段落感。

如何让传统滚轮操作也能获得如触控板般的阻尼反馈？

Lenis 库通过 JavaScript 模拟惯性算法，成功将”物理惯性”引入网页滚动，本文将解析其实现原理与实战应用。

核心技术原理

滚轮事件拦截与目标滚动距离计算

Lenis 会监听 wheel 事件，阻止默认滚动行为，并提取事件对象中的 deltaY 或 deltaX 值作为用户滚动的目标距离。例如

element.addEventListener("wheel", e => {
	e.preventDefault(); // 阻止原生滚动
	this.targetScroll += e.deltaY; // 累加滚动目标值
});

这一步骤将用户物理滚动的离散段落式信号转化为连续的目标滚动量，为后续惯性模拟提供基础。

惯性算法：线性插值与阻尼函数

Lenis 的核心惯性效果通过线性插值（Lerp）和阻尼函数（Damp）实现，线性插值：在每一帧中，通过插值公式平滑过渡当前滚动位置到目标位置

const lerp = (start, end, amt) => (1 - amt) * start + amt * end;
const currentScroll = lerp(animatedScroll, targetScroll, 0.1); // 0.1为插值强度
// 插值系数越小，滚动阻尼感越强

阻尼优化：为适应不同屏幕刷新率，引入时间步长（dt）和阻尼系数（lambda）优化计算

const damp = (x, y, lambda, dt) => lerp(x, y, 1 - Math.exp(-lambda * dt));
// 这种计算方式确保在 60 FPS 或更高刷新率下滚动速度平滑衰减

requestAnimationFrame 的帧同步

requestAnimationFrame（RAF）是浏览器原生动画 API，Lenis 通过 RAF 循环逐帧更新滚动位置：

function raf(time) {
	lenis.raf(time); // 传入时间戳用于计算帧间隔
	requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

在每一帧中，Lenis 会根据当前时间戳计算帧间隔（deltaTime），并更新插值后的滚动位置，最终通过设置 scrollTop 或 scrollLeft 实现视觉滚动

安装使用 Lenis

安装 Lenis

// 安装
npm i lenis

基础使用

// 使用
import Lenis from "lenis";
new Lenis({ autoRaf: true });
// 如果想监听滚动事件，可以使用 lenis.on 方法：
const lenis = new Lenis({ autoRaf: true });
lenis.on("scroll", e => {
	console.log(e);
});

Lenis 与 requestAnimationFrame 结合

import Lenis from "lenis";

const lenis = new Lenis();
const lenisInit = time => {
	lenis.raf(time);
	requestAnimationFrame(lenisInit);
};
lenis.on("scroll", () => {
	if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
		lenis.stop();
		lenis.start();
	}
});

requestAnimationFrame(lenisInit);

参考体验

本站效果即使用了 Lenis 与 requestAnimationFrame 结合

lenis - 官网 lenis - Github