问题描述
我正在观看有关交叉路口观察员的视频，我已经逐字逐句地复制了他的脚本，但不知何故出现了此错误。有人遇到相同的错误，但通过将querySelectorAll更改为querySelector来解决了他们的问题。即使当我复制他们的代码并将其更改为querySelector时，它仍然无法正常工作。下面的代码是我的。我正在使用vs代码实时服务器。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel='stylesheet' href='style.css'>
<script src='script.js'></script>
</head>
<body>
<section class = 'section1'></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</body>
</html>
@H_502_4@const sectionOne = document.querySelector('.section1');
const options = {};
const observer = new IntersectionObserver(function
(entries,observer){
entries.forEach(entry => {
console.log(entry);
});
},options);
observer.observe(sectionOne);
@H_502_4@body{
padding: 0;
margin: 0;
}
section{
height: 100vh;
width:100%;
}
section:nth-child(odd){
background: lightcoral
}
@H_502_4@解决方法
该元素返回null，因为脚本在HTML解析之前运行。我在脚本标签中使用了defer来避免此问题。
<script src='script.js' defer></script>
实际上看起来您发布的示例可以正常工作，您可以在我制作的JSFiddle中进行检查：https://jsfiddle.net/sandro_paganotti/pomtng6f/3/
const sectionOne = document.querySelector('.section1');
const options = {};
const observer = new IntersectionObserver(function
(entries,observer){
entries.forEach(entry => {
console.log(entry);
});
},options);
observer.observe(sectionOne);
当然，由于观察者仅附加到第一部分，因此只有在第一部分进入或离开视口时才会触发。
,添加
$(document).ready(function () { // your code }
文档 = 您的 div。
你必须确保 DOM 已经加载，当它“准备好”时，它就会启动:)
,您选择的是第一个元素，因为 querySelector 选择第一个元素 如果要全选，则使用 querySelectorAll，然后循环遍历它们 观察者可以一一观察，应该是这样的：
const sections = document.querySelectorAll('section');
const options = {};
const observer = new IntersectionObserver(function
(entries,observer){
entries.forEach(entry => {
console.log(entry);
});
},options);
// loop
sections.forEach( section => {
observer.observe(section);
});