• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

270
Views
Observador de intersección: ¿cómo se elimina una clase después de abandonar el puerto de visualización?

Estoy agregando una clase cuando un div ingresa a la ventana gráfica usando Intersection Observer. Simplemente no puedo entender cómo eliminar 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); })
almost 3 years ago · Santiago Trujillo
2 answers
Answer question

0

Gracias por tu ayuda Randy. Lo hice funcionar. Aquí está el código final:

 const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('animate1'); } else { entry.target.classList.remove('animate1'); } }) }) const boxElList = document.querySelectorAll('.overlay'); boxElList.forEach((el) => { observer.observe(el); })
almost 3 years ago · Santiago Trujillo Report

0

en lugar de esto

 entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('animate1'); } else { entry.target.classList.remove('animate1'); } })

puede usar toggle() y en lugar de entry.intersectionRadio > 0 puede usar entry.isIntersection

 entries.forEach(entry => { entry.target.classList.toggle("animate1",entry.isIntersection) })
almost 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error