How to use ResizeObserver to check only body's width change in JavaScript?

Question

I want to check <body>'s width change (not height).

Is there a way to do so with ResizeObserver?

you can do with ViewPort.innerWidth developer.mozilla.org/en-US/docs/Web/API/window/innerWidth, basically body is viewport — Flak
– Flak, Commented Aug 3, 2021 at 2:10

jsejcksn · Accepted Answer · 2021-08-03 04:39:38Z

15

Here's an example. Read more documentation at https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver.

function handleWidthChange (width) {
  console.log(width);
}

let prevWidth = 0;

const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    const width = entry.borderBoxSize?.[0].inlineSize;
    if (typeof width === 'number' && width !== prevWidth) {
      prevWidth = width;
      handleWidthChange(width);
    }
  }
});

observer.observe(document.body, {box: 'border-box'});

edited Aug 3, 2021 at 4:39

answered Aug 3, 2021 at 2:29

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AGamePlayer Over a year ago

Thanks very much, may I know what is the meaning of ? in the entry.borderBoxSize?.[0].inlineSize?

jsejcksn Over a year ago

It is the optional chaining operator. width will be undefined if that property is not present on the ResizeObserverEntry (rather than throwing a TypeError when trying to access the first array member). If this answers your question, feel free to mark it as such.

AGamePlayer Over a year ago

thanks. just note that html-minify-terser fails to recognize it. lol

Collectives™ on Stack Overflow

How to use ResizeObserver to check only body's width change in JavaScript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related