JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/283349

by Lhankor_Mhy

HTML

<section></section>
    <section></section>
    <section></section>

CSS

html {
            scroll-snap-type: y mandatory;
        }

        section {
            width: 100%;
            height: 100vh;
            background-color: silver;
            border: solid snow;
            scroll-snap-align: start;
            box-sizing: border-box;
            opacity: 0;
            transition: 1s;
        }
        section.active {
            opacity: 1;
        }

JavaScript

const observer = new IntersectionObserver(
            entries => {
                entries.forEach(e => {
                    console.log(e)
                    if (e.isIntersecting) e.target.classList.add('active');

                })
            },
            { threshold: 0.5 }
        );
        document.querySelectorAll('section').forEach(e => {
            observer.observe(e);
        });