配置

设置参数表（Settings）

参数	类型	默认值	描述
wrapper	HTMLElement, Window	window	用作滚动容器的元素
content	HTMLElement	document.documentElement	包含可滚动内容的元素（通常是 wrapper 的直接子元素）
eventsTarget	HTMLElement, Window	wrapper	监听滚轮和触摸事件的元素
lerp	number	0.1	滚动动画的线性插值强度（0到1之间）
duration	number	1.2	滚动动画持续时间（秒），若定义了 lerp 则此参数无效
easing	function	(t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))	滚动动画的缓动函数（若定义了 lerp 则无效）
orientation	string	vertical	滚动方向：vertical（垂直）或 horizontal（水平）
gestureOrientation	string	vertical	手势方向：vertical、horizontal 或 both
smoothWheel	boolean	true	是否启用鼠标滚轮的平滑滚动
syncTouch	boolean	false	模拟触摸设备滚动（iOS <16 可能不稳定）
syncTouchLerp	number	0.075	syncTouch 启用的插值强度
touchInertiaMultiplier	number	35	控制 syncTouch 惯性强度
wheelMultiplier	number	1	鼠标滚轮事件的滚动倍数
touchMultiplier	number	1	触摸事件的滚动倍数
normalizeWheel	boolean	false	跨浏览器标准化滚轮输入（当前不可靠）
infinite	boolean	false	启用无限滚动（需参考示例）
autoResize	boolean	true	是否自动根据 ResizeObserver 调整尺寸
progress (getter)	number		当前滚动进度（0到1之间）
rootElement (getter)	HTMLElement		Lenis 实例挂载的根元素
scroll (getter)	number		当前滚动值（若启用无限滚动则包含逻辑处理）
className (getter)	string		根元素的类名（动态生成用于 CSS 控制）

实例属性表（Instance Props）

属性	类型	描述
animatedScroll	number	当前动画滚动值
dimensions	object	实例的尺寸信息
direction	number	滚动方向：1（向上/左），-1（向下/右）
emitter	object	事件发射器实例
options	object	实例的配置参数
targetScroll	number	目标滚动值
time	number	实例创建后的时间（毫秒）
actualScroll	number	浏览器记录的当前滚动值
velocity	number	当前滚动速度
isHorizontal (getter)	boolean	是否为水平滚动
isScrolling (getter)	boolean	是否正在滚动动画中
isSmooth (getter)	boolean	是否启用平滑滚动
isStopped (getter)	boolean	用户是否被禁止滚动
limit (getter)	number	最大滚动值
progress (getter)	number	滚动进度（0到1之间）
rootElement (getter)	HTMLElement	Lenis 实例的根元素
scroll (getter)	number	当前滚动值（支持无限滚动）
className (getter)	string	根元素的类名

实例方法表（Instance Methods）

方法	描述	参数
raf(time)	必须在每帧调用（内部使用）	time: 时间（毫秒）
scrollTo(target, options)	滚动到目标位置	target: 目标值（像素数、CSS选择器、关键字或元素） options: 配置选项（见下方）
on(id, function)	监听实例事件	id: 事件名称（如 scroll） function: 回调函数
stop()	暂停滚动	无
start()	恢复滚动	无
resize()	手动调整尺寸（需关闭 autoResize）	无
destroy()	销毁实例并移除所有事件	无

scrollTo 的 options 参数：

参数	类型	描述
lerp	number	插值强度（覆盖全局 lerp）
duration	number	动画持续时间（秒）
easing	function	缓动函数
immediate	boolean	是否立即跳转（忽略动画）
lock	boolean	是否锁定用户滚动直到目标完成
force	boolean	即使实例已停止也强制滚动
onComplete	function	滚动完成后的回调

使用示例代码

1. 基础设置

javascript

const lenis = new Lenis({
  lerp: 0.2,
  smoothWheel: true,
  orientation: "vertical"
});

lenis.on("scroll", (e) => {
  console.log("当前滚动值:", e.animatedScroll);
});

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

2. 滚动到锚点

javascript

// 点击按钮滚动到元素
document.querySelector("#button").addEventListener("click", () => {
  lenis.scrollTo("#section-2", {
    duration: 2,
    easing: (t) => t * t, // 自定义缓动函数
    onComplete: () => console.log("滚动完成！")
  });
});

3. 响应式调整

javascript

// 手动调整尺寸（当 autoResize: false 时）
window.addEventListener("resize", () => {
  lenis.resize();
});

4. 暂停/恢复滚动

javascript

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

// 3秒后恢复
setTimeout(() => lenis.start(), 3000);

5. 访问属性

javascript

console.log("最大滚动值:", lenis.limit);
console.log("当前进度:", lenis.progress);
console.log("是否水平滚动:", lenis.isHorizontal);