lenis滑动插件的笔记
官网
lenis - npm
方法一：基础判断（推荐）
通过 Lenis 自带的 scroll 和 limit 属性直接判断：
const lenis = new Lenis()// 滚动事件监听
lenis.on('scroll', ({ scroll, limit }) => {const distanceToBottom = limit - scrollconst threshold = 100 // 距离底部100px触发if (distanceToBottom < threshold) {console.log('接近底部')// 执行加载更多等操作}
})方法二：动态内容适配
当页面内容动态增加时，需要 重置 Lenis 的尺寸计算：
// 加载新内容后调用
function loadMoreData() {fetch('/api/data').then(() => {// 1. 插入新内容到DOM// 2. 通知Lenis重新计算lenis.resize() // 关键方法})
}// 在滚动监听中
lenis.on('scroll', ({ scroll, limit }) => {if (limit - scroll < 100) {loadMoreData()}
})方法三：精确计算模式
针对复杂布局（如存在浮动元素、position: sticky 等）：
function isBottom() {// 获取 Lenis 的滚动容器const wrapper = lenis.wrapperElement || document.documentElement// 精确计算可滚动范围const actualLimit = wrapper.scrollHeight - wrapper.clientHeightconst currentScroll = lenis.scrollreturn currentScroll >= actualLimit - 1 // 消除计算误差
}// 使用示例
if (isBottom()) {console.log('精确到达底部')
}⚠️ 注意事项
-
性能优化
在滚动事件中使用防抖（建议直接使用 Lenis 的 RAF 机制）：
function checkBottom() {if (lenis.isScrolling) return // 滚动中不检测// 检测逻辑 }移动端适配
兼容触摸屏惯性滚动
lenis.on('scroll', ({ scroll, limit, velocity }) => {if (velocity > 0.1 && limit - scroll < 500) {// 快速滑动时提前加载} })方向判断
只在下滑时检测：
let lastScroll = 0 lenis.on('scroll', ({ scroll }) => {const isScrollingDown = scroll > lastScrolllastScroll = scrollif (isScrollingDown && isBottom()) {// 处理底部逻辑} })完整示例（React 版）
import { useEffect, useRef } from 'react' import Lenis from '@studio-freight/lenis'function App() {const lenisRef = useRef()useEffect(() => {const lenis = new Lenis()lenisRef.current = lenisconst checkBottom = () => {const { scroll, limit } = lenisif (limit - scroll < 100) {console.log('触发加载')// 此处执行加载逻辑}}const raf = (time) => {lenis.raf(time)checkBottom()requestAnimationFrame(raf)}requestAnimationFrame(raf)return () => lenis.destroy()}, [])return (<div>{/* 页面内容 */}</div>) }回调函数中的实参limit
-
-
关键特性
动态计算
Lenis 的阻尼效果会使实际滚动值略微超过 limit，但最终会回弹到 limit 值：
3. 边界缓冲
- 当页面高度变化时（例如加载更多内容），需手动调用
lenis.resize()更新：// 加载新内容后 document.body.appendChild(newContent) lenis.resize() // 重新计算 limit方向差异
- 垂直滚动:
limit = scrollHeight - innerHeight - 水平滚动:
limit = scrollWidth - innerWidth（需配置 Lenis 为横向滚动）
// 启用阻尼效果后
console.log(lenis.isScrolling) // 当滚动超过 limit 时为 true应用场景
1. 无限滚动加载
lenis.on('scroll', ({ scroll, limit }) => {if (limit - scroll < 100) {loadMoreContent()}
})返回顶部按钮
const showButton = scroll > 0.3 * limit 进度指示器
const progress = Math.min(scroll / limit, 1)对比原生属性
| 场景 | 原生方法 | Lenis 方法 | 优势 |
|---|---|---|---|
| 静态页面 | window.scrollY + scrollHeight 计算 | 直接使用 limit | 无需手动计算 |
| 动态加载内容 | 需监听 DOM 变化并重新计算 | 调用 resize() 即可 | 自动处理复合滚动容器 |
| 有 transform 的容器 | 可能计算错误 | 结果准确 | 正确处理 CSS transform 和复杂布局 |
| 横向滚动 | 需单独处理 scrollWidth | 统一使用 limit | 代码逻辑一致 |
六、特殊案例处理
存在 position: sticky 元素
// 手动补偿 sticky 元素高度
const stickyElement = document.querySelector('.sticky')
const adjustedLimit = limit - stickyElement.offsetHeight
多滚动容器
如果 Lenis 被配置为控制某个子容器：
const lenis = new Lenis({wrapper: document.getElementById('custom-scroll-container'),content: document.getElementById('custom-content')
})// 此时 limit 对应的是容器内部的滚动极限 通过理解 limit 的含义和使用场景，可以更高效地开发与滚动相关的交互功能，同时避免手动计算滚动边界的繁琐操作。