使用 querySelectorAll 的 Intersection Observer 引发
我陷入了交叉路口观察者问题。使用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);
饮歌长啸1回答
-
翻过高山走不出你
发生此问题是因为IntersectionObserver.observe()只能观察一个targetElement，但使用document.querySelectorAll()您传递的 NodeList 表示与指定选择器组匹配的文档元素列表。因此，您遇到了问题，但document.querySelector()只为您提供了第一个匹配的元素，因此当您使用它时没有问题。您可以通过遍历列表中的所有元素并单独观察每个元素来解决此问题，例如：const blogs = document.querySelectorAll('.entry');blogs.forEach(blog => observer.observe(blog));
随时随地看视频慕课网APP
相关分类
JavaScript