Intersection Observer无法监听特定section元素问题求助

问题描述 #

Intersection Observer监听大部分元素正常，但某个带watch类的section元素无法触发回调添加/移除in-page类——已确认该section在elements_to_watch节点列表中，但其内部的col-12元素可正常生效。

相关代码 #

HTML结构

<section class="introduction-section mb-5 watch" id=section>
  <div class="row wrapper h-100 " id=wrapper>
    <div class="col-12 px-0 introduction-title-container watch" id=introduction1>
      <h2 class="title">
        A SmartWatch is born that goes beyond all limits.
      </h2>
    </div>
    <div class="col-12 px-0 introduction-title-container watch" id=introduction2>
      <h2 class="title">For Athletes who challenge the impossible.</h2>
    </div>
    <div class="col-12 px-0 introduction-title-container watch" id=introduction3>
      <h2 class="title">The call to the Adventure begins.</h2>
    </div>
  </div>
</section>

JavaScript代码

// elements
let elements_to_watch = document.querySelectorAll('.watch');
// callback 
let callback = (items) => {
  items.forEach((item) => {
    console.log(item.target.id);
    if (item.isIntersecting) {
      console.log("... now in");
      item.target.classList.add("in-page");
    } else {
      console.log("... now out");
      item.target.classList.remove("in-page");
    }
  });
}
// observer
let observer = new IntersectionObserver(callback, {
  threshold: 0.57
});
// apply
elements_to_watch.forEach((element) => {
  observer.observe(element);
});

CSS样式

.introduction-section {
  background-color: var(--clr-dark);
  align-items: center;
}
.introduction-title-container {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.introduction-section .title {
  height: 100vh;
  font-size: calc(var(--fs-h2) * 1.2);
  color: var(--clr-light);
  text-align: center;
  max-width: 30rem;
  height: fit-content;
  margin-bottom: 0;
  top: 50%;
  left: calc(25% -20rem);
  position: fixed;

  transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  transform: scale(0.8);
}

.introduction-title-container.in-page .title {
  opacity: 1;
  transform: scale(1);
}

问题原因及解决方案 #

核心原因 #

1. section高度未明确设置：内部3个.introduction-title-container各占100vh，但section本身无高度属性，浏览器无法正确计算其交叉区域；加上阈值设为0.57，需要section 57%的区域进入视口才触发，实际难以满足。
2. fixed定位干扰父元素检测：.title使用position:fixed脱离文档流，导致浏览器对section的可见性判断偏差，父元素的实际占据空间被忽略，无法触发交叉检测。

解决步骤 #

1. 给section设置明确高度

修改CSS，让section占据对应子元素的总高度：

.introduction-section {
  background-color: var(--clr-dark);
  align-items: center;
  height: 300vh; /* 匹配3个100vh子元素的高度总和 */
}

2. 调整阈值（可选）

如果不需要高触发条件，降低阈值让section刚进入视口就触发：

let observer = new IntersectionObserver(callback, {
  threshold: 0.1
});

3. 修正fixed定位影响（若允许）

将.title的fixed改为absolute，同时给父容器加相对定位，确保父元素布局被正确计算：

.introduction-title-container {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative; /* 添加相对定位 */
}
.introduction-section .title {
  position: absolute; /* 替换fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8); /* 调整居中方式 */
  /* 保留其他样式 */
}

.introduction-title-container.in-page .title {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1); /* 同步更新transform */
}

4. 验证交叉比例

在回调中打印交叉比例，确认是否达到阈值：

let callback = (items) => {
  items.forEach((item) => {
    console.log(item.target.id, '交叉比例:', item.intersectionRatio);
    if (item.isIntersecting) {
      console.log("... now in");
      item.target.classList.add("in-page");
    } else {
      console.log("... now out");
      item.target.classList.remove("in-page");
    }
  });
}

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