You create a ResizeObserver object and pass a callback to the constructor. safari 13.1, Supported 13.1 Source 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. Get exclusive access to writing opportunities and advice in our community Discord. Or we can use the ResizeObserver constructor to create an object that lets us watch an element for resizing. We can listen to resize events by assigning a resize event listener to the window object. We can select it with document.querySelector. If we want to watch the browser window’s resizing, then we can watch the html element. Then we call ro.observe with the element that we’re watching.
Top and left have the x and y coordinates of the top left corner respectively.Įntry.target has the element we’re watching.
Width and height have the width and height of the element. We invoke the ResizeObserver constructor with a function that loops through the entries whyich has the items we’re watching.Īnd in the loop body, we get the dimensions from the ntentRect property. One way to add an event handler for the window resize event is to assign an event handler function to the window.onresize property.įor instance, we can write: window.onresize = (event) => ) ro.observe(document.querySelector('html')) Assign an Event Handler to the window.onresize Property In this article, we’ll look at how to watch the JavaScript window resize event to detect window resizes. We can watch window resize events with JavaScript to detect screen size changes of any kind.
0 kommentar(er)
