0
285
VistasDesplazarse al centro de un div al cargar la página web
Me gustaría saber cómo lograr una alineación centrada al cargar una página. Tengo un div de 4000x2000 píxeles y un texto centrado dentro de este div. Ahora, al recargar, quiero desplazarme hasta la X para que la X esté en el medio. Ya he encontrado algo en internet, lamentablemente no me funciona. ¿Qué estoy haciendo mal?
let testDiv = document.getElementById("containerTest"); document.addEventListener("DOMContentLoaded", function() { testDiv.scrollTop = testDiv.scrollHeight/2; testDiv.scrollLeft = testDiv.scrollWidth/2; }) #containerTest{ width: 4000px; height: 2000px; background-color: orange; } .inner-div{ left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 50px; position: relative; justify-content: center; text-align: center; color: red; } <div id="containerTest"> <div class="inner-div">X</div> </div> Así es como debería verse después de cargar: 
2 Respuestas
Responde la pregunta0
@Buggies hizo un buen comentario sobre el desplazamiento automático de los navegadores después de actualizar
Si desea una solución más robusta para desplazarse hacia el centro, intente usar scrollIntoView , que funciona incluso si hay contenido arriba/a la izquierda del contenedor.
window.addEventListener("load", function () { let testDiv = document.getElementById("containerTest"); testDiv.scrollIntoView({ behavior: "auto", block: "center", inline: "center", }); });0
El primer problema es el desplazamiento automático desde el navegador, información y solución que puede encontrar aquí: ¿Deshabilitar el desplazamiento automático del navegador después de actualizar una página?
El segundo problema es que se está desplazando con containerTest pero no se puede desplazar. Quiere desplazarse con cuerpo/ventana
ejemplo:
window.addEventListener('load', function () { let testDiv = document.querySelector('#containerTest') window.scroll(testDiv.scrollWidth / 2, testDiv.scrollHeight / 2) })