es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Observador de intersección – ¿Cómo se elimina una clase después de abandonar el viewport?

Observador de intersección – ¿Cómo se elimina una clase después de abandonar el viewport?

26 Jul, 2023 Programación

Estoy añadiendo una clase cuando un div entra en la ventana gráfica utilizando Intersection Observer. Simplemente no puedo encontrar cómo quitar la clase cuando el div sale de la ventana gráfica. Esto es lo que tengo hasta ahora:

“`
const callback = function (entries) {
entries.forEach(entry => {
if(entry.isIntersecting)
{
entry.target.classList.add(‘animate1’);
observer.unobserve(entry.target)
}
});
}
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll(‘.overlay’);
targets.forEach(target => {
observer.observe(target);
})

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para eliminar la clase cuando el div sale del viewport utilizando Intersection Observer, puedes agregar una declaración else al bloque if dentro de la función de retorno. Esto eliminará la clase cuando el elemento ya no esté intersecándose.

    Aquí tienes el código actualizado:

    const callback = function (entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate1');
      observer.unobserve(entry.target);
    } else {
      entry.target.classList.remove('animate1');
    }
  });
};

const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll('.overlay');

targets.forEach(target => {
  observer.observe(target);
});

    Al hacer esto, la clase animate1 se agregará cuando el elemento esté intersectándose con el viewport y se eliminará cuando no lo esté.

Comments are closed.