Lenis 会接管原生滚动行为，导致 scroll-behavior: smooth 失效；需改用 lenis.scrollTo() 方法显式处理锚点跳转，才能确保与 Lenis 动画系统协同工作。
lenis 会接管原生滚动行为，导致 `scroll-behavior: smooth` 失效；需改用 `lenis.scrollto()` 方法显式处理锚点跳转，才能确保与 lenis 动画系统协同工作。
Lenis 是一个高性能、可配置的平滑滚动库，它通过 requestAnimationFrame 主动控制滚动位置，从而实现更流畅、更可控的滚动动画。但正因如此，它会覆盖浏览器原生的 scroll-behavior: smooth 行为——当用户点击 这类锚点链接时，浏览器默认的平滑跳转被 Lenis 的滚动监听机制拦截，而 Lenis 默认不会自动响应原生 anchor 点击事件，因此表现为“瞬间跳转”或无反应。
✅ 正确做法是：禁用 scroll-behavior: smooth（避免干扰），改用 Lenis 提供的 scrollTo() 方法主动触发受控滚动。
以下是推荐实现方式（兼容现代框架与纯 JS 环境）：
✅ 方案一：React + lenis/react（推荐，如 Next.js）
'use client';
import { useLenis } from 'lenis/react';
export default function AnchorLink() {
const lenis = useLenis();
return (
<button onclick="{()"> lenis?.scrollTo('#pages-main', {
offset: -80, // 可选：顶部留白（如固定导航栏高度）
duration: 2.5,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) // 缓动函数
})}
className="c-btn"
>
scroll down
</button>
);
}
✅ 方案二：纯 HTML/JS（无框架）
<a href="#pages-main" class="c-btn" data-scroll-to>scroll down</a> <section id="pages-main"></section>
// 初始化 Lenis（注意：仅初始化一次）
const lenis = new Lenis({
duration: 2.5,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
direction: 'vertical',
gestureOrientation: 'vertical',
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
// 拦截所有带 data-scroll-to 的锚点链接
document.querySelectorAll('[data-scroll-to]').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const target = link.getAttribute('href');
if (target && target.startsWith('#')) {
lenis.scrollTo(target, {
offset: -80,
duration: 2.5
});
}
});
});
⚠️ 重要注意事项：
- ❌ 不要同时启用 html { scroll-behavior: smooth; } —— 它与 Lenis 冲突，可能导致双滚动、卡顿或跳转失效；
- ✅ scrollTo() 支持选择器（如 #pages-main）、DOM 元素、坐标对象（{ x: 0, y: 500 }）等多种目标格式；
- ✅ 支持 offset 参数适配固定头部（sticky header），避免内容被遮挡；
- ✅ 若集成 GSAP ScrollTrigger，请确保 lenis.on('scroll', ScrollTrigger.update) 已正确绑定（你已做到）；
- ✅ 在 Next.js 等服务端渲染环境，务必添加 'use client' 并使用 useLenis()，避免 SSR 报错。
总结：Lenis 的设计哲学是「主动控制，而非被动增强」。放弃依赖 CSS 原生行为，转而通过 scrollTo() 显式声明滚动意图，不仅能解决锚点失效问题，还能获得更高自由度的动效定制能力——这才是与 Lenis 协同开发的最佳实践。
