fix(首页): 修复入场动画期间滚动锁定问题

确保在 Lenis 加载完成前后都能正确锁定页面滚动
修复滚动锁定计数逻辑,避免重复操作
This commit is contained in:
2026-04-27 02:42:03 +08:00
parent 226dc5c147
commit ea9b7747e2
3 changed files with 21 additions and 7 deletions
+12 -6
View File
@@ -7,11 +7,11 @@ let lenisLockCount = 0
export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
// SSR 和 CSR 都支持:自动将 class 注入到 HTML 标签上
useHead({
htmlAttrs: {
class: computed(() => unref(isLocked) ? 'is-home-intro-active' : undefined)
class: computed(() => unref(isLocked) ? 'is-home-intro-active' : '')
}
})
@@ -23,19 +23,25 @@ export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
currentlyLocked = locked
// Lenis 控制仅在客户端有效
if (import.meta.client && $lenis) {
if (import.meta.client) {
if (locked) {
lenisLockCount++
// 只有第一个锁请求时,才真正停止 Lenis 并滚动到顶部
if (lenisLockCount === 1) {
$lenis.scrollTo(0, { immediate: true })
$lenis.stop()
document.documentElement.classList.add('is-home-intro-active')
if ($lenis) {
$lenis.scrollTo(0, { immediate: true })
$lenis.stop()
}
}
} else {
lenisLockCount = Math.max(0, lenisLockCount - 1)
// 只有当所有锁请求都释放时,才重新启动 Lenis
if (lenisLockCount === 0) {
$lenis.start()
document.documentElement.classList.remove('is-home-intro-active')
if ($lenis) {
$lenis.start()
}
}
}
}