0
396
ViewsManera eficiente de mover muchos elementos en la pantalla según la posición
Digamos que tenemos una cantidad de divs en una pantalla:
...y queremos desplazar estos, al unísono, hacia la izquierda:
...y a la derecha:
Un enfoque ingenuo sería simplemente recorrer cada elemento, tomar su posición actual y aplicar la cantidad de cambio genérico a cada div, así:
function set_element_positions(new_top, new_left) { var all_elems = document.getElementsByClassName("my_div"); for(var i=0; i < all_elems.length; i++) { var rect = all_elems[i].getBoundingClientRect(); var current_top = rect.top; var current_left = rect.left; all_elems[i].style.top = current_top + new_top + "px"; all_elems[i].style.left = current_left + new_left + "px"; } } Puedo llamar a la función anterior durante un evento de mouse as_change . Por ejemplo, un control deslizante puede llamar a la función anterior mientras se cambia, lo que significa que la función obviamente se llamará con mucha frecuencia.
Esto funciona bien para un número menor de divs; se mueven al unísono en tiempo real. Pero una vez que la cantidad de divs aumenta (~ 30), esto comienza a disminuir.
¿Existe una forma más eficiente de cambiar todas las posiciones de los elementos al unísono, de modo que algo como un control deslizante pueda recorrerlos rápidamente y modificarlos en tiempo real?
1 answers
Answer question0
Como no estoy seguro de lo que está tratando de lograr, enumeraré algunas soluciones al problema, según los diferentes escenarios.
Escenario 1: Mover todos los elementos en un solo contenedor
Si este es tu escenario, estás de suerte, ya que es el más fácil de resolver. Álvaro estaba realmente en el camino correcto. Lo que necesitarías en este caso es un contenedor dentro de un contenedor. Me explico con un pequeño ejemplo. Primero, el HTML:
<div id="viewPort"> <div id="innerContainer"> <div class="my_div"></div> <div class="my_div"></div> <div class="my_div"></div> </div> </div>Entonces, el CSS:
#viewPort { /* Example width/height. Use whatever you want here. */ width: 300px; height: 200px; overflow: hidden; } #innerContainer { position: relative; width: 200%; height: 200%; top: -50%; left: -50%; } La idea es tener un contenedor interno que ocupe más espacio que el contenedor externo y tener el desbordamiento oculto (a menos que desee las barras de desplazamiento por alguna razón). Una vez que esté configurado, puede 1) ajustar solo las propiedades top e left del contenedor interno, o 2) ajustar las posiciones de desplazamiento de viewPort ( scrollTop y scrollLeft ), dando la ilusión de movimiento sin mover nada.
Escenario 2: Mover solo algunos de los elementos en un solo contenedor
Aquí es donde las cosas pueden complicarse un poco, ya que ya no puedes usar el truco del contenedor en movimiento. El truco de desplazamiento anterior técnicamente aún puede funcionar si configura los elementos que no desea mover a la position: fixed . Sin embargo, sería necesario ajustar sus propiedades top e left para asegurarse de que permanezcan en los lugares correctos.
Desafortunadamente, aunque todos los elementos que desea mover tienen la misma clase, no puede simplemente actualizar la clase sobre la marcha, ya que Javascript no puede modificar el estilo CSS de las hojas de estilo. Puede intentar tomar la propiedad de transform existente en los elementos, agregarla y luego volver a aplicarla usando transformX() y transformY() , en lugar de modificar left y top ( pregunta anterior sobre este tema ).
Escenario 3: Estás tratando de hacer un juego
Javascript es un lenguaje interpretativo. En comparación con los lenguajes compilados, el código no se ejecutará tan rápido. De hecho, el HTML básico con Javascript no fue realmente diseñado para manejar escenarios que manejarían el juego, con algunas excepciones en las que podría solucionar las limitaciones. Si quiere hacer algo serio con HTML5, su mejor opción sería aprender sobre las etiquetas <canvas> o <svg> y trabajar con una de ellas.