Resizeobserver-Element Resize monitoring API

Motivation

Responsive site/web Application adjusts how content is displayed based on the viewport size. This is usually done through CSS and media queries. When CSS does not behave well we use JavaScript.

such as Document.addeventlistener ("Resize", "fun") or the onresize attribute of element. By listening to the Window.resize event, Javascript DOM operations are kept in sync with the viewport size.

But you will realize that this does not even include situations where the window is not resized but the element changes its size. For example, adding a new child element, setting the display style of the element none or a similar operation would change the size of the element, its sibling or ancestor.

As the popularity of responsive web applications increases, so does the need for responsive components. These components also require a response to the Resize event. Unfortunately, the Web platform does not currently provide a way for components to track their size.

Current Workarounds

Some applications implement a self-made sizing notification framework (for example: polymer). This method is error-prone, difficult to maintain, and requires a self-made approach for each component.

Others subtly adjust the content with events that can be used instead of adjusting events (for example: <a href= "Https://github.com/wnr/element-resize-detector" > element-resize-detector</a>). The best way to do this right now is to use similar techniques:

Inserts an absolutely positioned subkey in the component and makes the subkey as a scrolling event, or window.resize when the parent size changes.

A child method that is absolutely positioned does not work in frames such as shadowdom or react.

None of these methods are advisable. They have failed in terms of correctness, code complexity and performance.

The Resizeobserver feature cannot be duplicated on today's web platform.

That's why Resizeobserver is a useful raw API. It responds to changes in the size of any observed element, regardless of the cause of the change. It also provides you with access to the new size of the observation element.

Api

The API mentioned in the "Observer" suffix shares a simple API design. Resizeobserver is no exception.

You create a Resizeobserver object and pass the callback to the constructor. The callback will be given an array resizeoberverentries-an entry for each observation element-the size of the containing element

var New resizeobserver (entries = {= = Entry.contentrect;console.log (' Element: ' ) , entry.target); Console.log (' element size: ${cr.width}px x ${cr.height}px '); Console.log (' element padding: ${cr.top}px ; ${cr.left}px ');}); // Observe One or multiple elementsro.observe (someelement);

Usage Examples

The following is an example of using Resizeobserver to draw an ellipse within the canvas.

<canvas style= "width:10%;height:10%" ></canvas><canvas style= "width:20%;height:20%" ></canvas >functionDrawEllipse (entry) {Let CTX= Entry.target.getContext (' 2d '); let Rx= Math.floor (ENTRY.CONTENTRECT.WIDTH/2); let Ry= Math.floor (ENTRY.CONTENTRECT.HEIGHT/2); Ctx.beginpath (); Ctx.clearrect (0,0, Entry.contentrect.width,entry.contentrect.height); Ctx.ellipse (Rx, ry, Rx, Ry,0, 0, 2 *Math.PI); Ctx.stroke ();}//Resizeobserver delegates action to Element ' s Handleresize methodLet ro =NewResizeobserver (entries = { for(Let entry of entries) {if(entry.target.handleResize) entry.target.handleResize (entry);});//Set up Observationsvarcanvases = Document.queryselectorall (' Canvas '); for(let canvas of canvases) {Canvas.handleresize=Drawellipse;ro.observe (canvas);}

The inline framework can detect when its size changes and notifies the parent window.

New Resizeobserver (entries="iframeresize"' * ');}); Ro.observe (document.body);

How do we let the chat window scroll to the bottom when a new message arrives? The Resizeobserver solution keeps all messages in the growing Div and observes its size. When a new message arrives, scroll to the bottom of the story.
The complete example discusses the handling of user scrolling in detail.

. chat {overflow:scroll;} New Resizeobserver (entries = {for == chat.scrollheight- chat.clientheight;}}); Ro.observe (Document.queryselector ('. Chat-text '))

How

Performance

You can adjust the size of the notification to a very high frequency. The Observer API avoids the overhead of event capture/bubble.

Framework authors can provide a developer-friendly "event-based" API on top of Resizeobserver to avoid registering too many observers.

Notice

Notification Delivery Order

When multiple resizeobservers are registered, notifications should be sent in the order of registration.

Callback changesets should list elements in the order in which they are registered.

Inline Elements

Inline elements should not generate resizing notifications.

How to change?

The conversion does not affect the content size. They should not trigger notifications.

How's the animation?

Animations that affect the size of the content should trigger notifications.

If the cost of work is high, the developer may want to skip work during the animation.

Resizing and visibility

When the element is not visible, the content size becomes 0. This will generate a resizing notification. developers will be able to observe visibility using resizeobserver.

This article refers to:

Resizeobserver:it ' s like document.onresize for Elements-----https://developers.google.com/web/updates/2016/10/ Resizeobserver

Wicg/resizeobserver-----HTTPS://GITHUB.COM/WICG/RESIZEOBSERVER/BLOB/MASTER/EXPLAINER.MD

Resizeobserver-Element Resize monitoring API