Tengo un div que se configurará de acuerdo con la posición del elemento que se encuentra en la window . Al principio pensé que se trataba de un error de JQuery, pero después de investigar más y cambiar a Vanilla, sigue siendo el mismo.
He creado un fragmento de código para demostrar mi problema. Si ingresa el div blanco desde la parte superior con el mouse, la posición es correcta y el cuadro naranja cubre todo el cuadro blanco, pero si lo ingresa desde otros lados, es incorrecto por unos pocos píxeles:
var inspector_rect2= document.getElementById('inspector_rect'); $(window).mouseover(function(event) { inspector_rect2.style.left= event.target.getBoundingClientRect().x+'px'; inspector_rect2.style.top= event.target.getBoundingClientRect().y+'px'; inspector_rect2.style.width= event.target.getBoundingClientRect().width+'px'; inspector_rect2.style.height= event.target.getBoundingClientRect().height+'px'; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> </head> <style> html, body { height : 100%; margin : 0; width : 100%; } .MyCSS { background-color : silver; } .Container { height : 100%; margin : auto; width : 50%; } .Header { height : 5%; padding : 2% 0; width : 100%; } .MainContent { background-color : white; height : 70%; width: 100%; } .inspector{ position: absolute; pointer-events: none; z-index: 999; background: rgba(255, 166, 0, 0.5); } </style> <body class="MyCSS"> <div class="Container" > <div class="Header" ></div> <div class="MainContent" ></div> </div> </body> <div id=inspector_rect class=inspector></div>Parece ser causado por una interacción entre solicitar .getBoundingClientRect() y establecer width y height .
En general, solo debe hacer una solicitud, almacenarla y luego reutilizarla según sea necesario.
$(window).mouseover(function(event) { const rect = event.target.getBoundingClientRect(); inspector_rect2.style.left= rect.x+'px'; inspector_rect2.style.top= rect.y+'px'; inspector_rect2.style.width= rect.width+'px'; inspector_rect2.style.height= rect.height+'px'; });