Lenis 演示 · 惯性平滑滚动

让滚动变得丝滑、有惯性 —— 专注 Smooth Scroll 体验优化，常与 GSAP ScrollTrigger 搭配打造沉浸式官网。开源免费，本页整页接入 Lenis 驱动，向下滚动即可直接体验。

开源 / 免费 Smooth Scroll 常配 GSAP ScrollTrigger lenis@1.1.14

(A) 平滑滚动开关对比

关闭后本页立即切回浏览器原生滚动（无惯性、无阻尼），滚动手感差异会非常明显。切换后可继续向下滚动，随时对比。

smoothWheel · smoothTouch off（触屏遵循官方默认，保留原生手势）

三层色块以不同速度随滚动位移（GSAP ScrollTrigger scrub），配合 Lenis 的 scrollerProxy 保持进度同步；右侧圆环实时显示该区块的滚动完成度。

BACK LAYER

MID LAYER

FRONT LAYER

区块滚动进度：0%

该区块被 ScrollTrigger 纵向 pin 住，纵向滚动距离被转换为横向位移，Lenis 负责让这段纵向滚动本身保持惯性丝滑。

Panel 01
纵向滚动 → 横向位移

Panel 02
ScrollTrigger pin + scrub

Panel 03
常用于作品集 / 案例展示

Panel 04
Lenis 承载底层滚动惯性

Panel 05
滚动结束自动回到纵向

拖动滑块后下方独立的小型 Lenis 实例会立即用新参数重建，在 320px 高的框内滚动即可感受不同参数的手感差异（duration 越大越黏滞，lerp 越小越拖沓）。

duration（惯性时长） 1.2

lerp（跟随插值系数） 0.10

在此容器内滚动体验当前参数手感 · 01

在此容器内滚动体验当前参数手感 · 02

在此容器内滚动体验当前参数手感 · 03

在此容器内滚动体验当前参数手感 · 04

在此容器内滚动体验当前参数手感 · 05

在此容器内滚动体验当前参数手感 · 06

在此容器内滚动体验当前参数手感 · 07

在此容器内滚动体验当前参数手感 · 08

与顶部常驻进度条共用同一份数据，来自 lenis.on('scroll', ...) 回调而非原生 scroll 事件。

SECTION 06

这些占位区块用来撑出足够的滚动距离，便于持续感受 Lenis 的惯性衰减曲线。

SECTION 07

duration、easing、orientation、gestureOrientation、smoothWheel、touchMultiplier 等，均可在初始化时传入。

SECTION 08

Lenis 专注滚动本身，不做视觉动画；实际项目里通常搭配 GSAP ScrollTrigger、Motion 等库驱动具体动效。