CODEWITHSUNDEEP
javascripthtmlintersection-observer
mahmoud hegazi
mahmoud hegazi

Reputation: 3

I have problem with Intersection Observer API

I need to add .your-active-class to all the sections to be able to change the color of the element in the viewport, it works on the first 2 elements and ignore the third if i scroll up it work with the second section only and stop work can some one tell me what is the wrong on my code it's very small I will share it here I tried many ways to reach this point but still strange action from my code

I added <br> to make it small post but my project have large text

<!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>

can some one only tell me which part has the problem and I will try to work on fix it sorry it's my first time using this API I read it's good for performance so can some one help me please

Please I reached this part but removeing class not work add only work why

<!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>

Upvotes: 0

Views: 1360

Answers (1)

Raj Kumar
Raj Kumar

Reputation: 854

Issue in your code is observer will trigger when a element is visible and hidden, because of that, if element is visible it will add the class and the same time another element is getting hidden, so when it triggering your for loop removes the class and the condition which you used also false, that why its not updating.

If you want to remove class only for hidden elements, you can try like this

<!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>

Upvotes: 1

Related Questions