用 Lenis 给网站加上电影感平滑滚动：3 分钟上手的平滑滚动库教程

用 Lenis 给网站加上电影感平滑滚动3 分钟上手的平滑滚动库教程【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenisLenis 是一个 gzip 后只有几 KB、零依赖的轻量级平滑滚动库它直接包装浏览器原生滚动让网页像电影镜头一样顺滑地滑过去而 sticky 定位、锚点跳转和无障碍访问全都照常工作。下面用最短的路径把这个前端滚动动画方案接进你的项目。先说清楚平滑滚动到底解决了什么问题很多网站滚一下跳一下根源是原生滚动的步进节奏和页面动画没对上。Lenis拉丁语里smooth的意思的思路不是造一个假滚动条而是接管滚轮和触摸事件自己按帧插值出滚动位置再把真实滚动交还给浏览器。这样做的好处很实际体积小到可以忽略打包进任何项目都不心疼position: sticky、hash 锚点、屏幕阅读器这些原生能力不丢竖直、水平、嵌套容器一个实例都能管。一条命令装好 Lenis安装这一步没什么好讲的包管理器三选一跑一下就行npm i lenis跑完后确认终端无报错、node_modules里多出了lenis目录这一步就成功了。最小可运行示例new Lenis 之后要喂帧这是整个 Lenis 教程的核心就几行import Lenis from lenis const lenis new Lenis() function raf(time) { lenis.raf(time) requestAnimationFrame(raf) } requestAnimationFrame(raf)原理很简单Lenis 每帧需要一次raf调用来推进插值。保存文件、刷新页面滚一下鼠标滚轮——页面应该缓缓滑过去而不是生硬地一跳对上了就跑起来就完事了。这里有个小技巧不想手写这个循环的话初始化时传autoRaf: true让它自己开。⚙️ 最常调的三个配置项参数列表看着长日常真正会用到的就三个lerp插值强度默认0.1。调小如0.05更绵长拖沓调大如0.2更跟手duration平滑动画时长单位秒。它和lerp调的是同一种松紧感建议只动其中一个别两个一起拧wrapper滚动容器默认window。页面里有独立滚动的容器比如侧边栏、全屏画廊时把那个元素传进去让 Lenis 去管它。另外建议把仓库里 packages/core/lenis.css 的规则一并引入页面尤其是html.lenis相关的几条能避免和scroll-behavior打架。 和 GSAP、React 项目怎么配合GSAP ScrollTrigger把 Lenis 的scroll事件接到ScrollTrigger.update再改用gsap.ticker驱动lenis.raf让两者共用同一个时间轴即可具体写法可参考仓库 README.md 的 Setup 部分React / Vuemonorepo 里有官方适配包用 Provider 包住应用、组件里取 Lenis 实例即可用法详见 packages/react/README.md 和 packages/vue/README.md整屏吸附想做出一屏一屏的吸附效果可以直接试 packages/snap 插件它和平滑滚动是配套的不会互相拉扯。落地前先把这两件事做了第一件尊重用户的动效偏好。检测到prefers-reduced-motion或用户明确不想看动画时调一次lenis.stop()切回原生滚动几行代码就能换来一个不会晕掉用户的网站。第二件别在scroll回调里干重活把视差、进度条之类的计算挂到同一个raf循环里滚动体验的稳定性会明显不一样。跑通上面三步之后建议下一步只动lerp一个参数把0.05到0.2扫一遍手感找到和你页面气质匹配的那个值——这比研究其他十几个配置项划算得多。【免费下载链接】lenisSmooth scroll as it should be项目地址: https://gitcode.com/GitHub_Trending/le/lenis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考