我正在十字路口观察者上看一段视频，我逐字逐句地复制了他的脚本，不知怎么就出现了这个错误。有人也出现了同样的错误，但通过将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>
const sectionOne = document.querySelector('.section1');
const options = {};
const observer = new IntersectionObserver(function
(entries, observer){
entries.forEach(entry => {
console.log(entry);
});
}, options);
observer.observe(sectionOne);
body{
padding: 0;
margin: 0;
}
section{
height: 100vh;
width:100%;
}
section:nth-child(odd){
background: lightcoral
}
元素返回为null，因为脚本在解析HTML之前运行。为了避免这个问题，我在脚本标记中使用了defer。
<script src='script.js' defer></script>
您需要确保IntersectionObserver脚本将在DOM完全加载后运行。
document.addEventListener("DOMContentLoaded", function(){
// your instersectionobserver code here
});
您的选择是针对第一个元素的，因为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);
});
实际上，您发布的示例运行良好，您可以在我制作的这个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 }
document=您的部门
您必须确保DOM已经加载，并且当它被"加载"时；准备就绪"；然后它开始：(。
我相信intersectionObserver.observe只能观察到一个元素。我注意到，当有多个div元素具有相同的类名时，observe会返回未捕获的typeError。
其他通过从querySelectorAll更改为querySelector来实现它的人可能是因为他们有几个具有相同类名的div。
function playPauseVideo() {
let videos = document.querySelectorAll("video");
videos.forEach((video) => {
// We can only control playback without insteraction if video is mute
video.muted = true;
// Play is a promise so we need to check we have it
let playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then((_) => {
let observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (
entry.intersectionRatio !== 1 &&
!video.paused
) {
video.pause();
} else if (video.paused) {
video.play();
}
});
}, {
threshold: 0.2
}
);
observer.observe(video);
});
}
});
}
//您可以在适当的时候开始：播放暂停视频((；