JavaScript: far apparire gli elementi quando si scrolla la pagina

In JavaScript è semplice far apparire gli elementi quando si scrolla la pagina.

Possiamo utilizzare l'oggetto IntersectionObserver per il nostro scopo.

'use strict';

const scrollIntoView = () => {
    let root = document.querySelector('#content');
    let posts = root.querySelectorAll('article');

    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
           if(entry.isIntersecting) {
               let visiblePost = entry.target;
               visiblePost.classList.add('in');
           }
        });
    }, {
        root: null
    });

    Array.prototype.forEach.call(posts, post => {
       observer.observe(post);
    });
};

document.addEventListener('DOMContentLoaded', () => {
   scrollIntoView();
});

Questo oggetto monitora la posizione di uno o più elementi rispetto ad un elemento radice (root). Nell'esempio la proprietà isIntersecting ci avvisa quando uno degli elementi monitorati è visibile nella viewport del documento.

Demo

JavaScript: IntersectionObserver