diff --git a/app/assets/css/tailwind.css b/app/assets/css/tailwind.css index e462bf9..97444cc 100644 --- a/app/assets/css/tailwind.css +++ b/app/assets/css/tailwind.css @@ -26,7 +26,7 @@ /* 首页入场动画期间首帧就隐藏滚动条,避免黑色遮罩边缘露出白色滚动槽。 */ html.is-home-intro-active, html.is-home-intro-active body { - overflow: hidden; + overflow: hidden !important; background: #000; } } diff --git a/app/composables/usePageScrollLock.ts b/app/composables/usePageScrollLock.ts index 8426b1b..9a4568c 100644 --- a/app/composables/usePageScrollLock.ts +++ b/app/composables/usePageScrollLock.ts @@ -7,11 +7,11 @@ let lenisLockCount = 0 export const usePageScrollLock = (isLocked: Ref | boolean) => { const { $lenis } = useNuxtApp() as ReturnType & { $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) => { 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() + } } } } diff --git a/app/pages/index.vue b/app/pages/index.vue index c857907..e198d9b 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -1,6 +1,7 @@