Each of these properties returns a ResizeObserverSize object containing a blockSize property and an inlineSize property. SVGs are an exception to the rule, where ResizeObserver will report the dimensions of the bounding box.Īs of Chrome 84, ResizeObserverEntry has three new properties to provide more detailed information. The bounding box, as reported by getBoundingClientRect(), is the box that contains the entire element and its descendants. Don't confuse contentRect with the bounding box of the element. It's important to note that while ResizeObserver reports both the dimensions of the contentRect and the padding, it only watches the contentRect. The content box is the box in which content can be placed. Generally, a ResizeObserverEntry reports the content box of an element through a property called contentRect, which returns a DOMRectReadOnly object. observe (someElement ) Some details # What is being reported? # var ro = new ResizeObserver ( entries => px ` ) The callback is passed an array of ResizeObserverEntry objects-one entry per observed element-which contains the new dimensions for the element. You create a ResizeObserver object and pass a callback to the constructor. API #Īll the APIs with the Observer suffix we mentioned above share a simple API design. It provides access to the new size of the observed elements too. It reacts to changes in size of any of the observed elements, independent of what caused the change. This is why ResizeObserver is a useful primitive. For example, appending new children, setting an element's display style to none, or similar actions can change the size of an element, its siblings, or its ancestors. This didn't even cover cases where elements change their size without the main window having been resized. If you needed the new dimensions of an element after a resize, you had to call getBoundingClientRect() or getComputedStyle(), which can cause layout thrashing if you don't take care of batching all your reads and all your writes. In the event handler, you would then have to figure out which elements have been affected by that change and call a specific routine to react appropriately. Before ResizeObserver, you had to attach a listener to the document's resize event to get notified of any change of the viewport's dimensions.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |