使用Intersection Observer API检测两个div元素碰撞失败问题求助

你的问题核心在于Intersection Observer的root元素必须是目标元素的祖先节点，而box1和box2是同级元素（共同父级为white-board），把box2设为root不符合API的规则，因此无法正常工作。当root设为null时，默认以视口作为检测容器，所以能检测元素与视口的交集，但这不是你需要的两个元素间的碰撞检测。

要实现两个同级绝对定位元素的碰撞检测，最直接的方式是通过getBoundingClientRect()手动计算元素边界是否重叠，以下是具体实现代码：

手动碰撞检测实现 #

JavaScript代码 #

const box1 = document.querySelector(".box1");
const box2 = document.querySelector(".box2");

// 判断两个元素是否碰撞的核心函数
function isColliding(el1, el2) {
  const rect1 = el1.getBoundingClientRect();
  const rect2 = el2.getBoundingClientRect();

  // 通过边界判断是否存在重叠区域
  return !(
    rect1.top > rect2.bottom ||
    rect1.bottom < rect2.top ||
    rect1.left > rect2.right ||
    rect1.right < rect2.left
  );
}

// 实时检测碰撞的逻辑（示例绑定拖动事件）
let isDragging = false;
let offsetX, offsetY;

// 给box1添加拖动功能，拖动时实时检测碰撞
box1.addEventListener("mousedown", (e) => {
  isDragging = true;
  offsetX = e.clientX - box1.getBoundingClientRect().left;
  offsetY = e.clientY - box1.getBoundingClientRect().top;
});

document.addEventListener("mousemove", (e) => {
  if (!isDragging) return;
  box1.style.left = `${e.clientX - offsetX}px`;
  box1.style.top = `${e.clientY - offsetY}px`;
  
  // 每次移动后检测碰撞
  if (isColliding(box1, box2)) {
    console.log("box1与box2发生碰撞");
    // 此处执行你需要的操作
  } else {
    console.log("未发生碰撞");
  }
});

document.addEventListener("mouseup", () => {
  isDragging = false;
});

保留原HTML结构 #

<div class="white-board">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

调整后的CSS（添加拖动光标） #

.white-board{
    border: 3px solid grey;
    margin: 15px;
    padding: 50px;
    height: 300px;
    resize: vertical;
    overflow: auto;
    position: relative;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: black;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: move; /* 提示可拖动 */
}
.box2{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 120px;
}

补充说明 #

如果坚持要用Intersection Observer，必须调整DOM结构，将其中一个元素设为另一个的子元素（比如把box1嵌套进box2），再以box2为root观测box1。但这种结构可能破坏你的布局逻辑，因此手动计算边界是更灵活的方案。

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