交叉口观察员没有按预期工作

Question

I've got tow section tags that I want them to appear when they get scrolled, and the class is-visible gets added to the sections when they pass through the viewport. the problem is that the class is-visible gets added before the elements pass the viewport, and removed when they passed,, it's something wierd I don't what the mistake I did, I might be missing the obvious, any help I would be very gratefull !

this is the markup index.html :

<section class="section  scrollspy services animated-content" id="services">
<div class="container">

  <h2 class="services-title show-onscroll">What We Do</h2>

    <!-- animated content 1 -->
      <section class="Analysis show-onscroll">
        <h3 class="tab-title ">Media Analysis</h3>
       
      </section>

      <!-- animated content 2 -->
      <section class="Monitoring show-onscroll">
        <h3 class="tab-title ">Media Monitoring</h3>
        
      </section>
</div>

</section>

style.css:

/* Animated services */

.animated-content div.container>section {
    border: 1em solid #fff;
    border-bottom: 4em solid #fff;
    border-radius: .25em;
    box-shadow: 1em 1em 2em .25em rgba(0, 0, 0, .2);
    margin: 2em auto;
    opacity: 0;
    transform: translateY(4em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0, 1, .3, 1), opacity .3s .25s ease-out;
    max-width: 600px;
    width: 90%;
    will-change: transform, opacity;
}

div.container>section.is-visible {
    opacity: 1;
    transform: rotateZ(-2deg);
}

.animated-content .services-title {
    transform: translateY(4rem) scale(1.2);
    opacity: 0;
}

.animated-content .services-title.is-visible {
    animation: clear .9s forwards;
}

.animated-content section>h3 {
    color: var(--heading-font-color);
    font-size: 2rem;
}

.animated-content section>h5 {
    color: var(--heading-font-color);
    font-size: 1.5rem;
    margin-bottom: 0;
}

.animated-content section>p {
    margin: 0;
}

@keyframes clear {
    to {
        opacity: 1;
        transform: none;
    }
}

the index.js :

// Intersection observer
const callback = function (entries) {
    entries.forEach(entry => {
        entry.target.classList.toggle('is-visible');
    });
}
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll('.show-onscroll');
targets.forEach(target => {
    observer.observe(target);
})

Answer 1

You didn't add the check for entry.isIntersecting for the elements being observed. Also I switched from toggle to add the is-visible class. Currently I am not sure if you want to remove the is_visible class when element is not visible but that can be done in the else part of entry.isIntersecting .

So for now as soon as our element get's visible, I stop observing it.

 // Intersection observer const callback = function (entries) { entries.forEach(entry => { if(entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target) } }); } const observer = new IntersectionObserver(callback); const targets = document.querySelectorAll('.show-onscroll'); targets.forEach(target => { observer.observe(target); })

 /* Animated services */.animated-content div.container>section { border: 1em solid #fff; border-bottom: 4em solid #fff; border-radius: .25em; box-shadow: 1em 1em 2em.25em rgba(0, 0, 0, .2); margin: 2em auto; opacity: 0; transform: translateY(4em) rotateZ(-5deg); transition: transform 4s.25s cubic-bezier(0, 1, .3, 1), opacity.3s.25s ease-out; max-width: 600px; width: 90%; will-change: transform, opacity; } div.container>section.is-visible { opacity: 1; transform: rotateZ(-2deg); }.animated-content.services-title { transform: translateY(4rem) scale(1.2); opacity: 0; }.animated-content.services-title.is-visible { animation: clear.9s forwards; }.animated-content section>h3 { color: var(--heading-font-color); font-size: 2rem; }.animated-content section>h5 { color: var(--heading-font-color); font-size: 1.5rem; margin-bottom: 0; }.animated-content section>p { margin: 0; } @keyframes clear { to { opacity: 1; transform: none; } }

 <section class="section scrollspy services animated-content" id="services"> <div class="container"> <h2 class="services-title show-onscroll">What We Do</h2> <!-- animated content 1 --> <section class="Analysis show-onscroll"> <h3 class="tab-title ">Media Analysis</h3> </section> <!-- animated content 2 --> <section class="Monitoring show-onscroll"> <h3 class="tab-title ">Media Monitoring</h3> </section> </div> </section>