Tengo un element en mi sitio web con: class="F4" , encima de este element hay un botón y cuando hago clic en este botón quiero que suceda lo siguiente:
El element cambia su tamaño y el sitio web se desplaza suavemente para que el element esté en el centro de la ventana gráfica.
Esto es lo que pude hacer: (Violín aquí: https://jsfiddle.net/axm8shdo/4/ )
function enlargeF4(){ document.querySelector(".F4").style.width = "300px"; document.querySelector(".F4").style.height = "300px"; setTimeout(() => { document.querySelector(".F4").scrollIntoView({ behavior: 'smooth', block: 'center', }); }, 500); } * { margin: 0; } .spacer { background-color: lightgrey; width: 100%; height: 500px; } button { margin: 10px; } .F4 { width: 100px; height: 100px; background-color: yellow; transition-timing-function: ease-in-out; transition-duration: .5s; } <div class="spacer"> Scroll down! ;)</div> <button onclick="enlargeF4()">run: enlargeF4()</button> <div class="F4">Figure 4</div> <div class="spacer"></div>↑ Esto es más o menos lo que quiero, pero no realmente.
- Quiero que el cambio de tamaño y el desplazamiento sucedan simultáneamente. – Agregué un tiempo de espera porque sin él, mi script no se desplaza al centro de mi
element, pero realmente no quiero que haya un tiempo de espera.
- En algunos navegadores, como Firefox, el desplazamiento es realmente suave, pero en otros, como Safari, la página simplemente salta y básicamente no hay efecto de desplazamiento. – Necesito un desplazamiento suave en todos los navegadores.
¿Cómo puedo lograr el efecto deseado?
Solución posible:
De alguna manera descubro cuántos píxeles tengo que desplazarme hacia abajo y luego, usando setInterval() y window.scrollBy() , me desplazo suavemente hacia el centro del div . – Creo que puedo escribir ese interval , pero primero tengo que obtener de alguna manera la cantidad exacta de píxeles que tengo que desplazar hacia abajo o hacia arriba, y no sé cómo hacerlo.
Además: tal vez haya una manera más fácil o mejor de resolver esto...
¡Gracias!