lenis 是一款用于实现网页平滑滚动的轻量级 JS 插件。

特征

• 在主线程中运行滚动
• 高性能
• 轻量级（<4Kb gzipped）
• 保持 css Sticky 和 IntersectionObserver
• 辅助功能（CMD+F 页面搜索、键盘导航、在页面刷新时保持滚动位置等）
• External RAF
• SSR proof
• 自定义滚动缓动和持续时间

安装

npm i @studio-freight/lenis

引入

import Lenis from '@studio-freight/lenis'

配置

const lenis = new Lenis({
  lerp: 0.1,
  smooth: true,
  direction: 'vertical',
})

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

requestAnimationFrame(raf)

lerp 属性值则是控制滚动平滑程度，数值越小，滚动平滑越明显。

注意事项

确保scroll-behavior设置为auto或根本不设置

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

保持 html 元素的默认大小，这是 Webflow 实现所必需的

html.lenis {
  height: auto;
}

data-lenis-prevent在嵌套的滚动元素上使用该属性。此外，我们建议您添加overscroll-behavior: contain此元素

<div data-lenis-prevent>scroll content</div>

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

手动使用lenis.scrollTo('#anchor')锚链接点击

<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>

lenis 停止时隐藏溢出

.lenis.lenis-stopped {
  overflow: hidden;
}

GSAP ScrollTrigger 集成

lenis.on('scroll', ScrollTrigger.update)

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

链接: https://www.fly63.com/nav/3947