Vue中无法使用IntersectionObserver，如何修改实现元素视口可见切换？

以下是针对你的代码问题的具体修改，以及对应的原因说明：

修改后的完整代码 #

<template>
  <section class="hidden" ref="sections">
    <h1>Title</h1>
    <p>Some text</p>
  </section>
  <section class="hidden" ref="sections">
    <h2>More text</h2>
  </section>
</template>

<style scoped>
* {
  background-color: #131313;
  color: white;
  padding: 0;
  margin: 0;
}

section {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100vh;
}
.hidden {
  opacity: 0.5;
  transition: all 1s;
}
.hidden.show {
  opacity: 1;
}
</style>

<script setup>
import { onMounted, ref } from "vue";

const sections = ref([]);

onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("show");
        // 可选：元素进入视口后停止观察，避免重复触发
        observer.unobserve(entry.target);
      } else {
        entry.target.classList.remove("show");
      }
    });
  });

  sections.value.forEach((el) => observer.observe(el));
});
</script>

关键修改点说明 #

1. 修复样式优先级问题
   Vue的scoped样式会自动为元素添加属性选择器（如.hidden[data-v-xxx]），直接添加的.show类优先级低于.hidden，导致opacity不生效。改用.hidden.show组合选择器，提升样式优先级，确保进入视口时的样式能覆盖初始状态。

2. 修正CSS语法错误
   原代码background-color: 131313缺少#前缀，改为#131313才能正确渲染深色背景；同时添加color: white，避免深色背景下文字不可见。

3. 优化IntersectionObserver判断逻辑
   用entry.isIntersecting替代intersectionRatio > 0，这是判断元素是否进入视口的标准、更直观的方式。

4. 改用Vue规范的元素获取方式
   避免直接使用document.querySelectorAll，通过ref="sections"绑定元素，在onMounted中通过sections.value获取DOM节点，更符合Vue的响应式操作规范。

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