Tengo un encabezado con un color de fondo transparente que cambiará a negro cuando el usuario se desplace. Dado que estoy usando requestAnimationFrame para lograr esto, la transición debe hacer una pausa cuando la pestaña no está activa para ahorrar recursos. Probé esto con una función que cuenta hasta 300 que, de hecho, hizo una pausa cuando la pestaña no estaba activa y se reanudó a 300 cuando estaba activa. Sin embargo, parece que la transición de color de fondo de mi encabezado no se detiene cuando estoy en una nueva pestaña.
Estoy usando el ejemplo de mozilla que dice "Este ejemplo optimiza el evento de desplazamiento para requestAnimationFrame". Así que creo que debería funcionar bien con mi caso de uso (y lo hace). Solo me gustaría saber por qué mi transición no se detiene cuando está en una pestaña diferente para ahorrar recursos y ser lo más óptimo posible. ¡Gracias! https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event
"use strict"; // Reference: http://www.html5rocks.com/en/tutorials/speed/animations/ const $ = selector => document.querySelector(selector); let lastKnownScrollPosition = 0; let ticking = false; function doSomething(scrollPos) { // Do something with the scroll position if ( scrollPos > 0 ) { $("header").style.backgroundColor = "black"; } else { $("header").style.backgroundColor = "transparent"; } } document.addEventListener('scroll', function(e) { lastKnownScrollPosition = window.scrollY; if (!ticking) { window.requestAnimationFrame(function() { doSomething(lastKnownScrollPosition); ticking = false; }); ticking = true; } });Aquí está mi JSFiddle https://jsfiddle.net/Boros/zjwyamvq/3/
Un enfoque diferente sería usar un IntersectionObserver.
Si coloca un elemento diminuto (1 px x 1 px) en la parte superior de la página, puede establecer un IntersectionObserver en él, que le avisará tan pronto como salga de la ventana gráfica o vuelva a entrar.
De esa manera, solo tiene que ejecutar JS cuando haya un cambio en el que el usuario se haya alejado de la parte superior, lo que sucederá solo una vez hasta que se desplace hacia arriba.
No sé cuánto más eficiente es esto que usar el desplazamiento tradicional y tratar de acelerarlo, pero MDN dice:
los sitios ya no necesitan hacer nada en el hilo principal para observar este tipo de intersección de elementos, y el navegador es libre de optimizar la gestión de las intersecciones como mejor le parezca.
El hecho mismo de que no regrese para ejecutar JS cada vez que el usuario hace un desplazamiento debe ayudar, independientemente de si el navegador realiza una optimización adicional.
He aquí un ejemplo trivial. Agrega el div de 1px, establece un IntersectionObserver en él y si el div sale de la ventana gráfica, eso significa que el usuario se ha desplazado y si está en la ventana gráfica, el usuario se ha desplazado hacia la parte superior o el sistema está en la posición de inicio.
Tenga en cuenta que si desea que sea un poco menos sensible, puede configurar el div de verificación para que tenga una altura de, por ejemplo, 20 px, de modo que si el usuario se desplaza hacia atrás hasta casi la parte superior, el color cambia.
const $ = selector => document.querySelector(selector); const check = (entries) => { $("header").style.backgroundColor = (entries[0].isIntersecting) ? 'transparent' : 'black'; }; const observer = new IntersectionObserver(check); observer.observe($("#checker")); <div id="checker" style="width: 1px; height: 1pc; position: absolute; top: 0; left; 50%;"></div> <header style="width: 100vw; height: 200vh; transition: 5s;">SCROLL DOWN TO SEE BACKGROUND COLOR CHANGE TO BLACK</header>