我对 Intersection Observer API 有疑问
I have problem with Intersection Observer API
我需要将 .your-active-class 添加到所有部分，以便能够更改视口中元素的颜色，它适用于前 2 个元素，如果我忽略第三个向上滚动它仅适用于第二部分并停止工作有人可以告诉我我的代码有什么问题它非常小我将在这里分享我尝试了很多方法来达到这一点但我的代码仍然有奇怪的动作
我添加了 <br> 以使其变小 post 但我的项目有大文本
<!DOCTYPE html>
<html>
<style>
.your-active-class {
color: green;
}
</style>
<body onload="myFunction()">
<h2>Using a Relative File Path</h2>
<img src="/images/picture.jpg" alt="Mountain" style="width:300px">
<script>
function myFunction() {
myAllSections = document.querySelectorAll('.asection');
var observer = new IntersectionObserver(function(entries) {
// isIntersecting is true when element and viewport are overlapping
// isIntersecting is false when element and viewport don't overlap
/*clear any active */
for (let i=0; i < myAllSections.length; i++) {
myAllSections[i].classList.remove('your-active-class');
}
if(entries[0].isIntersecting === true)
entries[0].target.classList.add('your-active-class');
}, { threshold: [0] });
/* I used this insted of for loop to not repeat the function it self*/
var targets = [Array.from(document.querySelectorAll('.asection')), Array.from(document.querySelectorAll('.asection'))].flat();
targets.forEach(target =>
observer.observe(target));
}
</script>
</body>
<div class="menu__link">
<div class="asection" id="demo" data-link="item1">All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All :</div>
<br><br><br><br><br><br>
<div class="asection" id="demo2" data-link="item2">All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern the background-color along with different text colors):</div>
<br><br><br><br><br><br><br><br>
<div class="asection" id="demo3" data-link="item3">All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the backg different text colors):</div>
</div>
</html>
有人能告诉我哪个部分有问题吗，我会尝试解决它，抱歉这是我第一次使用这个 API 我读到它对性能有好处所以有人能帮助我吗
拜托，我已经读到这部分了，但是删除 class 不起作用，只添加才起作用，为什么
<!DOCTYPE html>
<html>
<head>
<style>
.active {
color: green;
background-color: black;
}
</style>
</head>
<body>
<p>Example list:</p>
<ul id="heros">
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
<button onclick="">Try it</button>
<p class="mytarget">hello world</p>
<p>hello worldClick the button to get the node nameClick the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list. of the parent element of the li element in the list.</p>
<p class="mytarget">hello world</p>
<p>Click the button to get the node nameClick the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list. of the parent element of the li element in the list.</p>
<p class="mytarget">hello world</p>
<p id="demo"></p>
<script>
document.body.onscroll = function() {myScript()};
function myScript () {
let x = document.querySelectorAll(".mytarget");
x.forEach(myFunction);
function myFunction() {
let hend = document.querySelectorAll(".mytarget");
for (var r = 0; r < hend.length; r++) {
var observer = new IntersectionObserver(function(entries) {
// isIntersecting is true when element and viewport are overlapping
// isIntersecting is false when element and viewport don't overlap
if(entries[0].isIntersecting === true)
entries[0].target.classList.add('active');
/* entries[0].target.style.color = "green"; */
/* فكك من ازاي تشيل الكلاس من العنصر لما تخرج شيل اي اكتف من بقيت العناصر وادي التارجت اكتف */
}, { threshold: [0] });
observer.observe(hend[r]);
}
/* to add it in all elements
var targets = [Array.from(document.querySelectorAll('.csss')), Array.from(document.querySelectorAll('.csss'))].flat();
targets.forEach(target =>
observer.observe(target));
*/
}
}
</script>
</body>
</html>
你的代码中的问题是观察者会在元素可见和隐藏时触发，因此，如果元素可见，它将添加 class，同时另一个元素被隐藏，所以当它触发你的 for 循环删除 class 和你使用的条件也是假的，这就是为什么它不更新。
如果你只想移除隐藏元素的class，你可以这样尝试
<!DOCTYPE html>
<html>
<style>
.your-active-class {
color: green;
}
</style>
<body onload="myFunction()">
<h2>Using a Relative File Path</h2>
<script>
function myFunction() {
myAllSections = document.querySelectorAll('.asection');
var observer = new IntersectionObserver(function (entries) {
[...entries].forEach(entry => {
if (entry.isIntersecting === true)
entry.target.classList.add('your-active-class');
else entry.target.classList.remove('your-active-class');
})
}, { threshold: [0] });
/* I used this insted of for loop to not repeat the function it self*/
var targets = [Array.from(document.querySelectorAll('.asection')), Array.from(document.querySelectorAll('.asection'))].flat();
targets.forEach(target =>
observer.observe(target));
}
</script>
</body>
<div class="menu__link">
<div class="asection" id="demo" data-link="item1">All modern browsers support the following 140 color names (click
on a color name, or a hex value, to view the color as the background-color along with different text colors):All
modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color
as the background-color along with different text colors):All modern browsers support the following 140 color
names (click on a color name, or a hex value, to view the color as the background-color along with different
text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value,
to view the color as the background-color along with different text colors):All modern browsers support the
following 140 color names (click on a color name, or a hex value, to view the color as the background-color
along with different text colors):All modern browsers support the following 140 color names (click on a color
name, or a hex value, to view the color as the background-color along with different text colors):All modern
browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the
background-color along with different text colors):All :</div>
<br><br><br><br><br><br>
<div class="asection" id="demo2" data-link="item2">All modern browsers support the following 140 color names (click
on a color name, or a hex value, to view the color as the background-color along with different text colors):All
modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color
as the background-color along with different text colors):All modern browsers support the following 140 color
names (click on a color name, or a hex value, to view the color as the background-color along with different
text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value,
to view the color as the background-color along with different text colors):All modern browsers support the
following 140 color names (click on a color name, or a hex value, to view the color as the background-color
along with different text colors):All modern browsers support the following 140 color names (click on a color
name, or a hex value, to view the color as the background-color along with different text colors):All modern
browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the
background-color along with different text colors):All modern browsers support the following 140 color names
(click on a color name, or a hex value, to view the color as the background-color along with different text
colors):All modern the background-color along with different text colors):</div>
<br><br><br><br><br><br><br><br>
<div class="asection" id="demo3" data-link="item3">All modern browsers support the following 140 color names (click
on a color name, or a hex value, to view the color as the background-color along with different text colors):All
modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color
as the background-color along with different text colors):All modern browsers support the following 140 color
names (click on a color name, or a hex value, to view the color as the background-color along with different
text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value,
to view the color as the background-color along with different text colors):All modern browsers support the
following 140 color names (click on a color name, or a hex value, to view the color as the background-color
along with different text colors):All modern browsers support the following 140 color names (click on a color
name, or a hex value, to view the color as the backg different text colors):</div>
</div>
</html>
我需要将 .your-active-class 添加到所有部分，以便能够更改视口中元素的颜色，它适用于前 2 个元素，如果我忽略第三个向上滚动它仅适用于第二部分并停止工作有人可以告诉我我的代码有什么问题它非常小我将在这里分享我尝试了很多方法来达到这一点但我的代码仍然有奇怪的动作
我添加了 <br> 以使其变小 post 但我的项目有大文本
<!DOCTYPE html>
<html>
<style>
.your-active-class {
color: green;
}
</style>
<body onload="myFunction()">
<h2>Using a Relative File Path</h2>
<img src="/images/picture.jpg" alt="Mountain" style="width:300px">
<script>
function myFunction() {
myAllSections = document.querySelectorAll('.asection');
var observer = new IntersectionObserver(function(entries) {
// isIntersecting is true when element and viewport are overlapping
// isIntersecting is false when element and viewport don't overlap
/*clear any active */
for (let i=0; i < myAllSections.length; i++) {
myAllSections[i].classList.remove('your-active-class');
}
if(entries[0].isIntersecting === true)
entries[0].target.classList.add('your-active-class');
}, { threshold: [0] });
/* I used this insted of for loop to not repeat the function it self*/
var targets = [Array.from(document.querySelectorAll('.asection')), Array.from(document.querySelectorAll('.asection'))].flat();
targets.forEach(target =>
observer.observe(target));
}
</script>
</body>
<div class="menu__link">
<div class="asection" id="demo" data-link="item1">All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All :</div>
<br><br><br><br><br><br>
<div class="asection" id="demo2" data-link="item2">All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern the background-color along with different text colors):</div>
<br><br><br><br><br><br><br><br>
<div class="asection" id="demo3" data-link="item3">All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the backg different text colors):</div>
</div>
</html>
有人能告诉我哪个部分有问题吗，我会尝试解决它，抱歉这是我第一次使用这个 API 我读到它对性能有好处所以有人能帮助我吗
拜托，我已经读到这部分了，但是删除 class 不起作用，只添加才起作用，为什么
<!DOCTYPE html>
<html>
<head>
<style>
.active {
color: green;
background-color: black;
}
</style>
</head>
<body>
<p>Example list:</p>
<ul id="heros">
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
<button onclick="">Try it</button>
<p class="mytarget">hello world</p>
<p>hello worldClick the button to get the node nameClick the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list. of the parent element of the li element in the list.</p>
<p class="mytarget">hello world</p>
<p>Click the button to get the node nameClick the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list. of the parent element of the li element in the list.</p>
<p class="mytarget">hello world</p>
<p id="demo"></p>
<script>
document.body.onscroll = function() {myScript()};
function myScript () {
let x = document.querySelectorAll(".mytarget");
x.forEach(myFunction);
function myFunction() {
let hend = document.querySelectorAll(".mytarget");
for (var r = 0; r < hend.length; r++) {
var observer = new IntersectionObserver(function(entries) {
// isIntersecting is true when element and viewport are overlapping
// isIntersecting is false when element and viewport don't overlap
if(entries[0].isIntersecting === true)
entries[0].target.classList.add('active');
/* entries[0].target.style.color = "green"; */
/* فكك من ازاي تشيل الكلاس من العنصر لما تخرج شيل اي اكتف من بقيت العناصر وادي التارجت اكتف */
}, { threshold: [0] });
observer.observe(hend[r]);
}
/* to add it in all elements
var targets = [Array.from(document.querySelectorAll('.csss')), Array.from(document.querySelectorAll('.csss'))].flat();
targets.forEach(target =>
observer.observe(target));
*/
}
}
</script>
</body>
</html>
你的代码中的问题是观察者会在元素可见和隐藏时触发，因此，如果元素可见，它将添加 class，同时另一个元素被隐藏，所以当它触发你的 for 循环删除 class 和你使用的条件也是假的，这就是为什么它不更新。
如果你只想移除隐藏元素的class，你可以这样尝试
<!DOCTYPE html>
<html>
<style>
.your-active-class {
color: green;
}
</style>
<body onload="myFunction()">
<h2>Using a Relative File Path</h2>
<script>
function myFunction() {
myAllSections = document.querySelectorAll('.asection');
var observer = new IntersectionObserver(function (entries) {
[...entries].forEach(entry => {
if (entry.isIntersecting === true)
entry.target.classList.add('your-active-class');
else entry.target.classList.remove('your-active-class');
})
}, { threshold: [0] });
/* I used this insted of for loop to not repeat the function it self*/
var targets = [Array.from(document.querySelectorAll('.asection')), Array.from(document.querySelectorAll('.asection'))].flat();
targets.forEach(target =>
observer.observe(target));
}
</script>
</body>
<div class="menu__link">
<div class="asection" id="demo" data-link="item1">All modern browsers support the following 140 color names (click
on a color name, or a hex value, to view the color as the background-color along with different text colors):All
modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color
as the background-color along with different text colors):All modern browsers support the following 140 color
names (click on a color name, or a hex value, to view the color as the background-color along with different
text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value,
to view the color as the background-color along with different text colors):All modern browsers support the
following 140 color names (click on a color name, or a hex value, to view the color as the background-color
along with different text colors):All modern browsers support the following 140 color names (click on a color
name, or a hex value, to view the color as the background-color along with different text colors):All modern
browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the
background-color along with different text colors):All :</div>
<br><br><br><br><br><br>
<div class="asection" id="demo2" data-link="item2">All modern browsers support the following 140 color names (click
on a color name, or a hex value, to view the color as the background-color along with different text colors):All
modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color
as the background-color along with different text colors):All modern browsers support the following 140 color
names (click on a color name, or a hex value, to view the color as the background-color along with different
text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value,
to view the color as the background-color along with different text colors):All modern browsers support the
following 140 color names (click on a color name, or a hex value, to view the color as the background-color
along with different text colors):All modern browsers support the following 140 color names (click on a color
name, or a hex value, to view the color as the background-color along with different text colors):All modern
browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the
background-color along with different text colors):All modern browsers support the following 140 color names
(click on a color name, or a hex value, to view the color as the background-color along with different text
colors):All modern the background-color along with different text colors):</div>
<br><br><br><br><br><br><br><br>
<div class="asection" id="demo3" data-link="item3">All modern browsers support the following 140 color names (click
on a color name, or a hex value, to view the color as the background-color along with different text colors):All
modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color
as the background-color along with different text colors):All modern browsers support the following 140 color
names (click on a color name, or a hex value, to view the color as the background-color along with different
text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value,
to view the color as the background-color along with different text colors):All modern browsers support the
following 140 color names (click on a color name, or a hex value, to view the color as the background-color
along with different text colors):All modern browsers support the following 140 color names (click on a color
name, or a hex value, to view the color as the backg different text colors):</div>
</div>
</html>