How to detect window resize event using ResizeObserver

Question

I'd like to detect widnow resize event using ResizeObserver

currenlty I use

window.addEventListener('resize',() => console.log('resize'));

I want to refactor it and use ResizeObserver. Is it possible?

programmerRaj · Accepted Answer · 2021-09-15 15:50:25Z

23

You can observe document.body.

new ResizeObserver(() => {
  console.log('resized')
}).observe(document.body)

answered Sep 15, 2021 at 15:50

programmerRaj

2,1783 gold badges12 silver badges25 bronze badges

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

9 Comments

programmerRaj Over a year ago

My opinion is that this method does not have better performance.

neojp Over a year ago

This only gets triggered if you resize the window's width. Resizing the window's height doesn't change the size of the body hence this event never gets triggered.

programmerRaj Over a year ago

@neojp does window.addEventListener('resize') get triggered when height changes?

neojp Over a year ago

It's not a bug, because your code is observing the body. The body won't change its height based on the window's height.

programmerRaj Over a year ago

So I'm guessing you could set the height style to 100% for <body> and it will observe

|

Collectives™ on Stack Overflow

How to detect window resize event using ResizeObserver

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related