12

I'm trying to detect a DOM element screen position change without polling or using events like onscroll and so on. MutationObserver would do the trick, but it seems that it won't work for methods (like getBoundingClientRect() for example).

Is that accurate? If not, how do I use MutationObserver to detect clientRect changes?

Example: https://codepen.io/Darksoulsong/pen/rwOQLo

Add new boxes, scroll the viewport, add some more and note that the rect values don't get updated.

darksoulsong
  • 13,988
  • 14
  • 47
  • 90
  • What do you mean by "position change"? – guest271314 Jun 08 '17 at 17:46
  • 2
    The element position on screen. In this case, `element.getBoundingClientRect().left` – darksoulsong Jun 08 '17 at 17:47
  • 1
    MutationObserver detects changes in DOM nodes/attributes, so if there are none it won't work, naturally. In that case use ResizeObserver and IntersectionObserver. – wOxxOm Jun 08 '17 at 17:52
  • @wOxxOm Where is `ResizeObserver` documented? – guest271314 Jun 08 '17 at 17:56
  • @guest271314 is here: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver seems by it's very nature, getBoudingClientRect is not supported, did you find other solutions? thanks – David Guan Nov 23 '17 at 03:49
  • @darksoulsong Have you found any solutions yet? – Harshal Patil Mar 06 '21 at 17:04
  • 1
    @HarshalPatil I didn't. So I had to find a workaround and write a polling function to make it work as I expected at the time. – darksoulsong Feb 21 '22 at 16:16
  • Does this answer your question? [An event or observer for changes to getBoundingClientRect()](https://stackoverflow.com/questions/40251082/an-event-or-observer-for-changes-to-getboundingclientrect) – trusktr Dec 21 '22 at 20:59
  • I think https://stackoverflow.com/questions/40251082 can be the canonical duplicate, as it has the most thought in the couple answers. 40251082 needs more work though. – trusktr Dec 21 '22 at 21:00

0 Answers0