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;
}<div id="container">
<br><br><br><br><br><br><br><br><br>
<div id="track"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>how detect when getBoundingClientRect() changes?