Tengo un sitio en el que todas las secciones toman 100vh/vw y quiero animar la transición de opacidad cuando el usuario intenta desplazarse hacia arriba o hacia abajo.
La cuestión es que el evento de desplazamiento no se activa porque la ventana no se ha desplazado realmente.
aquí está el codepen , y la esencia de esto:
// css .section { width: 100vw; height: 100vh; opacity: 0; transition: opacity 0.5s; } .section.active { opacity: 1; } // html <div className="section active">Some stuff here...</div> <div className="section">Some stuff here...</div> // js window.addEventListener("scroll", () => { console.log("never fires") })¿Es esto posible?
Y si no, ¿alguna idea para solucionarlo?
Cambie el desplazamiento de palabras clave a la rueda, este evento se activa cuando intenta desplazarse desde el mouse/pad (usando los dedos), incluso si no hay desplazamiento
window.addEventListener("wheel", () => { console.log("event fires") })Debería ser <div class="..."> , no <div className="..."> .
window.addEventListener("scroll", () => { console.log("now fires") }) .section { width: 100vw; height: 100vh; opacity: 0; transition: opacity 0.5s; } .section.active { opacity: 1; } <div class="section active">Some stuff here...</div> <div class="section">Some stuff here...</div>Puede escuchar el evento de la wheel y luego, si el usuario se desplaza hacia abajo, puede establecer la opacity de la siguiente sección en 1 y viceversa.
window.addEventListener('wheel', (e) => { let element = document.querySelector('.active'); element.style.setProperty('opacity', 0); if ( e.deltaY > 0 ) { element.nextSibling.style.setProperty('opacity', 1); } else { element.previousSibling.style.setProperty('opacity', 1); } });