0

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

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

我的代码起初如下所示：

  // 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)

我的期望是它会同时观看，无论一个是交叉路口，它都会添加一个类。事实并非如此。我有：

未捕获的类型错误：无法在“IntersectionObserver”上执行“观察”：参数 1 不是“元素”类型。

我不知道这是什么意思。什么是“参数 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)

也不行。

为什么？

4

0 回答 0