Nuxt3+Tailwind滚动时文本颜色不更新问题求助

核心问题根源 #

你遇到的问题本质是：scrolled响应式变量仅在模块初始化时赋值了一次，没有绑定滚动事件来实时更新变量值，导致页面无法同步渲染变化。即便通过日志确认变量值改变，也只是临时逻辑触发，而非滚动行为驱动的持续更新。

修复方案 #

1. 重构滚动状态管理逻辑 #

修改~/composables/states.ts，增加滚动监听与响应式更新逻辑：

export const useScrollState = () => {
  const scrolled = ref(false)

  const updateScrollStatus = () => {
    scrolled.value = window.scrollY > 0
  }

  // 客户端环境下绑定滚动事件
  if (process.client) {
    window.addEventListener('scroll', updateScrollStatus)
    // 初始化时执行一次，确保初始状态正确
    updateScrollStatus()
  }

  // 组件卸载时移除监听，避免内存泄漏
  onUnmounted(() => {
    if (process.client) {
      window.removeEventListener('scroll', updateScrollStatus)
    }
  })

  return { scrolled }
}

2. 调整组件使用方式 #

替换原直接导入的方式，改用上面的composable获取滚动状态，同时修正template标签的无效class：

<script lang="ts" setup>
const { scrolled } = useScrollState()

function scrollToAnchor(anchorId: string): void {
  const element = document.getElementById(anchorId)
  if (element) {
    element.scrollIntoView({ behavior: "smooth" })
  }
}
</script>

<template>
  <!-- 注意：template标签不能绑定class，将sticky移到内部根div上 -->
  <div class="sticky w-full flex flex-row justify-around pt-16 font-medium">
    <NuxtImg src="/logo_white.png" class="h-full" />
    <button @click="scrollToAnchor('tattoos')">
      <p
        class="text-white"
        :class="{
          'text-black': scrolled,
        }">
        Tattoos
      </p>
    </button>
    <button @click="scrollToAnchor('artwork')">
      Artwork
    </button>
    <button @click="scrollToAnchor('contact')">
      Contact
    </button>
  </div>
</template>

<style scoped></style>

3. 关键注意事项 #

• 禁止在<template>标签上绑定class，所有样式类需作用于内部DOM元素
• 必须在客户端环境下操作window对象，用process.client做判断是Nuxt的标准写法
• 组件卸载时移除滚动监听，避免长期运行导致内存泄漏

内容的提问来源于stack exchange，提问作者webelev