为什么我的intersectionObserver 将我的querySelect 返回为未定义？

如何解决为什么我的intersectionObserver 将我的querySelect 返回为未定义？

我正在尝试使用intersectionObserver定位一个父元素和一个子元素，然后我有一个函数将父元素的背景更改为不同的颜色并旋转子元素。

此代码适用于父 div，但子项返回未定义。 是我无法使用 querySelector 定位子元素，还是intersectionObserver 无法观察多个元素？

let options = {
  threshold: 0.25
}

let observer = new IntersectionObserver(function(entries,observer) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      return;
    } else {
      console.log(entry.target);
      console.log(entry.sticky);
      alert('INTERSECTING!');
      entry.target.classList.toggle("red");
      entry.sticky.classList.toggle("rotate");
    }
  });
},options);

let target = document.querySelector('.placeholder__div__large');
let sticky = document.querySelector('.sticky__container');

observer.observe(target,sticky);

.placeholder__div__large {
  height: 200vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: black;
  transition: 2s;
}

.sticky__container {
  position: sticky;
  top: 100px;
  width: 200px;
  height: 200px;
}

.sticky__item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: white;
  color: black;
  width: 100%;
  height: 100%;
}

.red {
  background: red;
  transition: 2s;
}

.rotate {
  transform: rotate(180deg);
}

<div class="placeholder__div__large">
  <div class="sticky__container">
    <div class="sticky__item">STICKY ITEM</div>
  </div>
</div>

解决方法

你不能通过将它们全部传递给 .observe 来观察多个元素，你必须多次调用它。

另外，我假设您更愿意这样做（我不确定我是否正确，但您的部分代码对我没有任何意义）：

let options = {
  threshold: 0.25
}

const observer = new IntersectionObserver(function(entries,observer) {
  entries.forEach(entry => {
    console.log('INTERSECTING with',entry.target,entry.isIntersecting);
    entry.target.classList.toggle("intersect",entry.isIntersecting);
  });
},options);

const target = document.querySelector('.placeholder__div__large');
const sticky = document.querySelector('.sticky__container');

observer.observe(target);
observer.observe(sticky);

.placeholder__div__large {
  height: 200vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: black;
  transition: 2s;
}

.sticky__container {
  position: sticky;
  top: 100px;
  width: 200px;
  height: 200px;
}

.sticky__item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: white;
  color: black;
  width: 100%;
  height: 100%;
}

.red-whenintersect.intersect {
  background: red;
  transition: 2s;
}

.rotate-whenintersect.intersect {
  transform: rotate(180deg);
}

<div class="placeholder__div__large red-whenintersect">
  <div class="sticky__container">
    <div class="sticky__item rotate-whenintersect">STICKY ITEM</div>
  </div>
</div>

,

你想观察粘性元素，如果它与父元素重叠（在阈值内），你想通过旋转它来改变粘性，父元素为背景红色。

所以，要设置观察者，我们要观察粘性。我们不需要同时观察这两个元素。我们还想设置一个阈值，所以这就是选项的来源：

observer.observe(sticky,options)

在回调函数中，我们知道条目将是粘性的，因为这是我们唯一观察到的条目，因此可以安全地拥有它 - 如果 isIntersecting 则进行更改。您已经在 J​​S 中设置了 target 和 sticky 两个元素，因此请使用它们进行更改，您无需参考 entry 即可找到它们（并且 entry.sticky 无论如何都没有意义）。

我不确定最终目标是什么，因为这些变化只发生在交叉路口，即在非交叉路口不会回到原来的状态，但这里有一个片段，其中设置了颜色和旋转的变化在问题中：

let options = {
  threshold: 0.25
}

let observer = new IntersectionObserver(function(entries,observer) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      return;
    } else {
      target.classList.toggle("red");
      sticky.classList.toggle("rotate");
    }
  });
},options);

let target = document.querySelector('.placeholder__div__large');
let sticky = document.querySelector('.sticky__container');

observer.observe(sticky);

.placeholder__div__large {
  height: 200vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: black;
  transition: 2s;
}

.sticky__container {
  position: sticky;
  top: 100px;
  width: 200px;
  height: 200px;
}

.sticky__item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: white;
  color: black;
  width: 100%;
  height: 100%;
}

.red {
  background: red;
  transition: 2s;
}

.rotate {
  transform: rotate(180deg);
}

<div class="placeholder__div__large">
  <div class="sticky__container">
    <div class="sticky__item">STICKY ITEM</div>
  </div>
</div>