Reputation: 10431
The documentation and the canonical examples of the ResizeObserver
show that the callback function receives
An array of ResizeObserverEntry objects that can be used to access the new dimensions of the element after each change.
Do I understand this API correctly and typically, it should be enough to just use the last array element to get the "final" size of the element?
const resizeObserver = new ResizeObserver(entries => {
const finalElement = entries[entries.length - 1];
const finalBoxSize = finalElement.contentBoxSize;
console.log(finalBoxSize);
});
Upvotes: 2
Views: 670
Reputation: 1725
Likely that is not the correct way. To me, it looks like it really depends how accurate your "query" for the element to be observed is. Take look at the properties defined in the callback array objects here. The callback returns an array of those objects. If you have a very specific "query" e.g. element with an id it should return only one element, if you pass just a div, then it will likely return an array of every div on the page as a separate entry. I haven't tried it myself so there is some guessing done here.
Upvotes: 0