Javascript ejecutar cuando sea visible

Si quieres lanzar una función de Javascript cuando se muestre una etiqueta de HTML… ¡Estas de suerte! Con el nuevo API Observables evitarás cálculos innecesarios como comprobar la posición del elemento. Te enseño lo fácil que es implementarlo en la actualidad, sin recurrir al evento de scroll u otras técnicas que malgastan la CPU del equipo.

HTML

Antes hay que definir el elemento que queremos usar como disparador. Cuando sea visible en el viewport, o entre en la zona visible por el ojo del visitante, es cuando lanzaremos el código.

<article id="miArticulo">
Lorem ipsum
</article>

Javascript

Llega el momento de usar Observable.

// Declaramos la función que será lanzada
const onIntersection = (entries) => {
    // Recorremos cada intersección 
    entries.forEach((entry) => {
        // Comprobamos si ahora es visible
        if (entry.isIntersecting) {
          // Guardamos el elemento que ahora es visible
          let element = entry.target;
          // Ejecutamos el código cuando si es visible
          console.log('Es visible en el viewport ' + element);
          } else {
          // Ejecutamos el código cuando no es visible
          console.log('Invisible');
        }
    });
};

// Creamos un observador y le pasamos como argumento la función que queremos lanzar
const miObserver = new IntersectionObserver(onIntersection);

// Indicamos que elemento del HTML queremos aplicar el observador
miObserver.observe(document.querySelector('#miArticulo'));

Si lo único que vas a hacer es añadir una clase, porque por ejemplo quieres crear animaciones al realizar un scroll, puedes simplificar la tarea con .

Versión escritorio