Lenis 会接管原生滚动行为，导致 scroll-behavior: smooth 失效；必须通过 lenis.scrollTo() 方法显式触发带缓动的锚点跳转，而非依赖原生 <a href="https://www.php.cn/link/16a8dbbbdbb3056273cbf39955c6f7b0"> 行为。
lenis 会接管原生滚动行为，导致 `scroll-behavior: smooth` 失效；必须通过 `lenis.scrollto()` 方法显式触发带缓动的锚点跳转，而非依赖原生 `` 行为。
Lenis 是一个高性能、可配置的自定义滚动库，它通过 requestAnimationFrame 驱动虚拟滚动容器（如 document.body 或自定义容器），从而实现更细腻的滚动动画与 ScrollTrigger 等动效库的深度集成。但正因它完全绕过了浏览器原生滚动机制，CSS 中设置的 html { scroll-behavior: smooth } 将被忽略——点击含 href="#section-id" 的链接时，浏览器仍会触发原生跳转（瞬间滚动），而 Lenis 默认不会拦截或接管该行为。
✅ 正确做法是：禁用原生锚点跳转，并改用 Lenis 提供的 scrollTo() 方法主动执行平滑滚动。该方法支持选择器字符串（如 "#pages-main"）、DOM 元素、坐标偏移量等多种目标格式，并可传入精细控制选项：
// 基础用法：滚动到 ID 元素，使用默认配置
lenis.scrollTo('#pages-main');
// 进阶用法：指定偏移、持续时间、缓动函数等
lenis.scrollTo('#pages-main', {
offset: -80, // 向上偏移 80px（常用于固定头部）
duration: 2.5, // 滚动持续时间（秒）
easing: (t) => t * t, // 自定义缓动函数（此处为 ease-in）
immediate: false // 是否立即中断当前滚动（默认 false）
});? 关键注意事项：
- ❌ 不要同时保留 <a href="#pages-main"> 和 scroll-behavior: smooth —— 它们在 Lenis 激活后无效且可能引发冲突；
- ✅ 推荐将锚点链接改为 button 或带 onClick 的 span，并阻止默认跳转行为：
<button onClick={(e) => { e.preventDefault(); lenis?.scrollTo('#pages-main', { offset: -80 }); }} className="c-btn" > scroll down </button> - ⚠️ 若使用 Next.js（App Router），需确保在客户端组件中调用 useLenis()（配合 'use client' 指令），因为 Lenis 依赖 DOM API；
- ? Lenis 不自动监听 <a> 标签点击事件，如需全局接管所有锚点链接，可手动绑定事件委托（不推荐过度封装，应优先语义化控制）。
总之，Lenis 的设计哲学是「显式优于隐式」：它不试图模拟或修补原生行为，而是提供更强大、可控的滚动 API。理解这一点，就能避免常见陷阱，构建出流畅、稳定、可维护的滚动交互体验。
