如何让Intersection Observer在intersectionRatio=1时持续触发实现元素滚动旋转？

首先得明确核心问题：Intersection Observer（IO）只有在目标元素的intersectionRatio发生变化时才会触发回调。当元素完全进入视窗（intersectionRatio=1）后，继续滚动并不会改变这个值，所以IO就“躺平”了。针对你的需求，除了你提到的几种方案，这里还有几个实用的思路：

方案一：IO + 全局scroll事件结合（最灵活的方案） #

这个思路是用IO跟踪元素的可见状态，当元素完全可见时，切换到监听全局scroll事件来更新旋转；非完全可见时，依然用IO的回调来处理。这样既保留了IO性能上的优势（不用频繁计算元素位置），又解决了完全可见时的需求。

示例代码：

const box = document.getElementById('box');
let isFullyVisible = false;

// 初始化IO，跟踪元素可见状态
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    isFullyVisible = entry.intersectionRatio === 1;
    // 非完全可见时，用IO返回的entry计算旋转
    if (!isFullyVisible) {
      const rotation = (500 - entry.boundingClientRect.top) * 0.1;
      box.style.transform = `rotate(${rotation}deg)`;
    }
  });
}, {
  threshold: Array.from({length: 101}, (_, i) => i / 100) // 0到1的101个阈值
});

observer.observe(box);

// 完全可见时，通过scroll事件更新旋转
window.addEventListener('scroll', () => {
  if (isFullyVisible) {
    const rect = box.getBoundingClientRect();
    // 这里可以根据需求调整旋转计算逻辑，比如基于滚动距离或元素位置
    const rotation = (window.scrollY) * 0.1;
    box.style.transform = `rotate(${rotation}deg)`;
  }
});

优点：逻辑清晰，性能可控（scroll事件只在必要时执行计算）；缺点：需要维护一个状态变量，同时处理两种事件监听。

方案二：观察更大的父容器 #

给你的方块套一个高度足够大的父容器，让父容器在方块完全可见时，其intersectionRatio仍会随滚动变化。这样IO会持续触发回调，我们在回调里依然获取方块自身的位置来计算旋转。

示例代码：

<div id="container">
  <div id="box"></div>
</div>

#container {
  height: calc(100vh + 500px); /* 视窗高度+方块高度，确保滚动时容器可见比例变化 */
}
#box {
  width: 500px;
  height: 500px;
  background: #ccc;
  margin: 100vh auto; /* 让方块初始在视窗下方，方便测试 */
}

const box = document.getElementById('box');
const container = document.getElementById('container');

const observer = new IntersectionObserver(() => {
  // 不管容器的可见状态，直接获取方块的位置计算旋转
  const rect = box.getBoundingClientRect();
  const rotation = (500 - rect.top) * 0.1;
  box.style.transform = `rotate(${rotation}deg)`;
}, {
  threshold: Array.from({length: 101}, (_, i) => i / 100)
});

observer.observe(container);

优点：不需要额外的scroll监听，纯IO处理；缺点：需要额外的容器元素，且容器高度需要根据布局调整，可能影响页面结构。

方案三：动态调整rootMargin扩展观察区域 #

通过设置rootMargin修改IO的观察区域，让方块完全在原视窗内时，其intersectionRatio仍处于变化状态。这个需要根据视窗高度动态计算rootMargin的值。

示例代码：

const box = document.getElementById('box');
const viewportHeight = window.innerHeight;
const boxHeight = 500;

// 计算rootMargin：向上扩展视窗高度减去方块高度的区域
const rootMargin = `-${viewportHeight - boxHeight}px 0px 0px 0px`;

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const rotation = (500 - entry.boundingClientRect.top) * 0.1;
    box.style.transform = `rotate(${rotation}deg)`;
  });
}, {
  threshold: Array.from({length: 101}, (_, i) => i / 100),
  rootMargin: rootMargin
});

observer.observe(box);

// 窗口resize时重新计算rootMargin，适配新的视窗高度
window.addEventListener('resize', () => {
  const newViewportHeight = window.innerHeight;
  observer.disconnect();
  observer.options.rootMargin = `-${newViewportHeight - boxHeight}px 0px 0px 0px`;
  observer.observe(box);
});

优点：不需要额外元素或scroll监听，纯IO实现；缺点：需要动态计算rootMargin，且窗口大小变化时要重新配置IO，逻辑稍复杂。

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