为什么IntersectionObserver中querySelector选中的元素返回undefined？

错误原因 #

• IntersectionObserver.observe() 方法仅接收1个参数，就是要被监听的目标元素，你写observer.observe(target, sticky)时，第二个sticky参数会被直接忽略，并不会被加入监听列表，也不会绑定到entry对象上。
• IntersectionObserver触发回调时返回的entry对象本身没有sticky这个自定义属性，你调用entry.sticky必然返回undefined，和querySelector能否选中元素、IntersectionObserver能否监听多个元素都没有关系。
• 额外说明：IntersectionObserver本身支持同时监听多个元素，只需要对每个要监听的目标元素单独调用一次observe()方法即可。

适配你的需求的修正代码 #

你的需求是监听父元素进入视口时同时修改父子元素样式，只需要监听父元素，触发回调时直接操作提前查询到的子元素即可，修正后的JS代码如下：

let options = {
  threshold: 0.25
}

let observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      return;
    }
    // 操作父元素
    entry.target.classList.toggle("red");
    // 直接操作提前查询到的子元素即可
    sticky.classList.toggle("rotate");
    // 如果担心变量作用域问题，也可以从当前触发的父元素内查找子元素
    // entry.target.querySelector('.sticky__container').classList.toggle("rotate");
  });
}, options);

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

// 仅监听父元素即可满足需求
observer.observe(target);

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