Question

我想不出更好的标题，但这是这种情况：

我想在路口观察器中观察两个不同的元素。页面上有一个元素

起初我的代码如下：

  // page 1 element to watch
  const titleEl = document.querySelector('.table-header')
  // page 2 element to watch
  const pdTitleEl = document.querySelector('#section h2')
  const stickyPageEl = document.querySelector('.pagination-links--sticky')

  const handler = (entries) => {
    if (!entries[0].isIntersecting) {
      stickyPageEl.classList.add('dropdown-shadow')
    } else {
      stickyPageEl.classList.remove('dropdown-shadow')
    }
  }
  const observer = new window.IntersectionObserver(handler)
  // page 1 observer 
  observer.observe(titleEl)
  // page 2 observer 
  observer.observe(pdTitleEl)

我的期望是它会同时监视两个对象，并且如果其中一个是交集，它将添加一个类。事实并非如此。我得到了：

未捕获的TypeError：无法执行“观察” 'IntersectionObserver'：参数1的类型不是'Element'。

我不知道这意味着什么。什么是“参数1”？

这让我开始思考：

不是“元素”类型。

我尝试过：

  // page 1 element to watch
  const titleEl = document.querySelector('.table-header')
  // page 2 element to watch
  const pdTitleEl = document.querySelector('#section h2')
  const stickyPageEl = document.querySelector('.pagination-links--sticky')

  const handler = (entries) => {
    if ((!entries[0].isIntersecting) && (titleEl)) {
  stickyPageEl.classList.add('dropdown-shadow')
} else if ((!entries[0].isIntersecting) && (pdTitleEl)) {
  stickyPageEl.classList.add('dropdown-shadow')
} 
else {
  stickyPageEl.classList.remove('dropdown-shadow')
}
  }
  const observer = new window.IntersectionObserver(handler)
  // page 1 observer 
  observer.observe(titleEl)
  // page 2 observer 
  observer.observe(pdTitleEl)

我认为应该检查它们是否首先存在，但是我仍然遇到相同的错误。

您可以在不同的元素上运行多个observe()函数吗？不是这样吗？

编辑

正如评论者和我自己所指出的那样，这似乎与DOM中不存在的元素有关，这是有道理的。

  // page 1 element to watch
  const titleEl = document.querySelector('.table-header')
  // page 2 element to watch
  const pdTitleEl = document.querySelector('#section h2')
  const stickyPageEl = document.querySelector('.pagination-links--sticky')

  const handler = (entries) => {
    if ((!entries[0].isIntersecting) && (titleEl != null)) {
  stickyPageEl.classList.add('dropdown-shadow')
} else if ((!entries[0].isIntersecting) && (pdTitleEl != null)) {
  stickyPageEl.classList.add('dropdown-shadow')
} 
else {
  stickyPageEl.classList.remove('dropdown-shadow')
}
  }
  const observer = new window.IntersectionObserver(handler)
  // page 1 observer 
  observer.observe(titleEl)
  // page 2 observer 
  observer.observe(pdTitleEl)

也不起作用。

为什么？

两个单独的watch（）函数监视两个不同的元素，不监视它们

0 个答案: