Je regarde une vidéo sur l'observateur d'intersection et j'ai copié son mot de script pour mot et que je reçois une manière d'une manière ou d'une autre. Quelqu'un avait la même erreur mais a résolu leur problème en changeant QuerySelectorall à QuerySelector. Même lorsque j'ai copié leur code et que je l'ai changé à QuerySelector, cela n'a toujours pas fonctionné à ma fin. Le code ci-dessous est à moi. J'utilise VS Code Live Server.
<!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
}
En fait, il ressemble à l'exemple que vous avez posté fonctionne bien, vous pouvez le vérifier dans ce jsfiddle i fait: 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);
Bien sûr, étant l'observateur uniquement attaché à la première section que cela ne tire que lorsque la première section entre ou quitte la fenêtre.