0
397
VistasEfficient way to move many elements on the screen based on position
Say we have a number of divs on a screen:
...and we want to shift these, in unison, to the left:
...and to the right:
A naive approach would be to simply loop through each element, take its current position, and apply the generic shift amount to each div, like this:
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";
}
}
I can call the above function during an as_change mouse event. For example, a slider can call the above function while being changed, meaning the function will obviously be called very frequently.
This works well for a smaller number of divs; they move in unison in real time. But once the number of divs becomes large (~30) this start to slow down.
Is there a more efficient way to change all the element positions in unison, such that something like a slider can rapidly loop through them all and modify them in real time?
1 Respuestas
Responde la pregunta0
Since I'm not sure what you're trying to accomplish, I'll list a few solutions to the problem, depending on different scenarios.
Scenario 1: Moving all the elements in a single container
If this is your scenario, you're in luck, as this is the easiest the solve. Alvaro was actually on the right track. What you would need in this case is a container within a container. Let me explain with a small example. First, the HTML:
<div id="viewPort">
<div id="innerContainer">
<div class="my_div"></div>
<div class="my_div"></div>
<div class="my_div"></div>
</div>
</div>
Then, the 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%;
}
The idea is to have an inner container that takes more space than the outer container, and have the overflow hidden (unless you want the scrollbars for some reason). Once you are setup, you can either 1) adjust just the inner container's top and left properties, or 2) adjust the scroll positions of viewPort (scrollTop and scrollLeft), giving the illusion of movement without actually moving anything.
Scenario 2: Moving only some of the elements in a single container
This is where things can get a little tricky, since you can no longer use the moving container trick. The scrolling trick above can technically still work if you set the elements you don't want to move to position: fixed. However, it would require adjusting their top and left properties to make sure they stay in the correct spots.
Unfortunately, even though all the elements you want to move have the same class, you can't just update the class on the fly, since CSS styling from stylesheets can't be modified by Javascript. You could try grabbing the existing transform property on the elements, adding to it, then reapplying it using transformX() and transformY(), instead of modifying left and top (Previous question on this topic).
Scenario 3: You're trying to make a game
Javascript is an interpretive language. Compared to compiled languages, the code won't execute as quickly. In fact, basic HTML with Javascript wasn't really designed to handle scenarios that would handle gameplay, with some exceptions where you could work around the limitations. If you want to make something serious with HTML5, your best bet would be learning about either the <canvas> or <svg> tags, and work with one of them.