我试图使用JavaScript中的Intersection Observer API检测两个div元素之间的冲突，但它没有按预期工作。div元素具有绝对定位，我想检测它们何时相交。
我尝试将box2作为根元素，将box1作为观察者，但没有成功。它只在我设置root时起作用：选项中为null。在这里，在官方文档https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API中
其中明确指出：目标元素与设备的视口或指定元素相交。因此，我想将目标元素设置为指定的元素，即方框2.

var box1 = document.querySelector(".box1");
  var box2 = document.querySelector(".box2");
    
  function handleIntersection(entries) {
    entries.forEach(function(entry) {
      console.log(entry.target);
      if (entry.isIntersecting) {
        console.log("Magnet element is intersecting with the target div: ", entry.target);
        // want to perform some action
      }
    });
  }
  
  var observerOptions = {
    root: box2,
    threshold: 0 // Adjust the threshold value as needed
  };
  
  var observer = new IntersectionObserver(handleIntersection, observerOptions);
  
  observer.observe(box1);

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

.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;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 120px;
}