How can I subscribe to or detect position change of HTML element?

Question

I want subscribe/detect position change of html element caused by every event (scrolling, DOM mutation, CSS/style changes).

If the position of a particular element changes for every reason I want detect it!

this is just an example

const checkPosition = (el, callback) => {

  let rect = el.getBoundingClientRect();

  let x = rect.x;
  let y = rect.y;
  
  const check = () => {
    let rect = el.getBoundingClientRect();
    if (rect.x !== x || rect.y !== y) {
      x = rect.x; 
      y = rect.y;
      callback(x, y);
    } 
    requestAnimationFrame(check);
  };
  check();
};


const divVar = document.getElementById('track');
checkPosition(divVar, (x, y) => console.log('moved', {x, y}));

#track {
  display: block; 
  height: 50px; 
  width: 50px; 
  border: 1px solid red;
}

#container {
  dispay: block; 
  height: 100px; 
  width: 100px; 
  overflow: auto; 
}

how detect when getBoundingClientRect() changes?

How can I subscribe to or detect position change of HTML element?

0 Answers