使用 querySelectorAll 的 Intersection Observer 引發 TypeError

Question

我陷入了交叉路口觀察者問題。 使用document.querySelectorAll('.entry')會引發 TypeError：“未捕獲的 TypeError：無法在 'IntersectionObserver' 上執行 'observe'：參數 1 不是 'Element' 類型。”

更改document.querySelectorAll('.entry'); 到document.querySelector('.entry'); 解決了這個問題，它的工作原理。

我究竟做錯了什么？

基本的 HTML 結構：

<html>
<body>
  <div id="content-container">
    <div class="content">
      <div class="entry">Some content here on each entry</div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
    </div>
</div>
</body
</html>

JavaScript：

const blog = document.querySelectorAll('.entry');
const options = {
  root: null,
  rootMargin: '0px',
};

const observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      return;
    } 

    else {
      console.log(entry);
    }
  });



}, options);


observer.observe(blog);

Answer 1

發生此問題的原因是IntersectionObserver.observe()只能觀察一個targetElement ，但使用document.querySelectorAll()時，您傳遞的 NodeList 表示與指定選擇器組匹配的文檔元素列表。 因此，您遇到了問題，但是document.querySelector()只為您提供了第一個匹配的元素，因此使用它時沒有問題。

您可以通過遍歷列表中的所有元素並單獨觀察每個元素來解決此問題，例如：

const blogs = document.querySelectorAll('.entry');
blogs.forEach(blog => observer.observe(blog));

使用 querySelectorAll 的 Intersection Observer 引發 TypeError

問題描述

1 個解決方案

解決方案1
4 已采納 2020-04-05 12:50:52

使用 querySelectorAll 的 Intersection Observer 引發 TypeError

問題描述

1 個解決方案

解決方案1 4 已采納 2020-04-05 12:50:52

解決方案1
4 已采納 2020-04-05 12:50:52