Tengo docenas de videos en una página.
Cuando se reproduce el video, cambio varios atributos (fondo oscuro, aumento del tamaño del video, alineación al centro del video, desplazamiento a la parte superior del video para que solo se muestre el elemento, etc.).
Mi script se parece a lo siguiente:
document.querySelectorAll('div div video').forEach(function(e) { e.addEventListener('playing', function(event) { e.style.width = ''; e.style.height = '95vh'; e.closest('div').style.textAlign = 'center'; e.closest('div').style.width = '100%'; e.previousElementSibling.style.color = '#ccc'; var pos = e.getBoundingClientRect(); window.scrollTo(0,pos.top - 40); b = document.querySelector('body'); b.style.backgroundColor = '#101010'; }); });El problema es
var pos = e.getBoundingClientRect(); window.scrollTo(0,pos.top - 40);el código anterior solo parece funcionar si el desplazamiento está en la parte superior de la página. Si uno se ha desplazado hacia abajo en la página antes de hacer clic en reproducir, la posición de desplazamiento termina en el lugar equivocado.
Creé un ejemplo en https://jsfiddle.net/017mxvbs/ Para ver a qué me refiero con cargar violín, haga clic en reproducir en un video sin desplazarse. Actualice la página, desplácese hacia abajo y haga clic en reproducir en uno de los últimos videos.
Entonces, ¿qué estoy haciendo mal?
Utilice offsetTop en su lugar.
document.querySelectorAll('div div video').forEach(function(e) { e.addEventListener('playing', function(event) { e.style.width = ''; e.style.height = '95vh'; e.closest('div').style.textAlign = 'center'; e.closest('div').style.width = '100%'; e.previousElementSibling.style.color = '#ccc'; window.scrollTo(0,e.offsetTop); b = document.querySelector('body'); b.style.backgroundColor = '#101010'; }); });Más información sobre la diferencia entre getBoundingClientRect y offsetTop aquí: ¿Diferencia entre getBoundingClientRect().top y offsetTop?