Me gustaría saber si hay alguna forma de determinar con qué cantidades se desborda un div en cualquier dirección. Las búsquedas en Internet solo me llevaron al punto en el que puedo calcular los valores horizontales o verticales totales con los que se desborda un div. Pero, quería saber los valores exactos de top , right , bottom , left .
Puede usar getBoundingClientRect y calcular el valor en el valor DOMRect .
Esta API tiene un buen soporte de navegador .
Dentro de un componente Reactjs , debe usar ref para acceder a div en phisycal DOM.
import React from 'react'; const Foobar = () => { const onRef = (element) => { const domRect = element.getBoundingClientRect(); console.log(` quantity before overflow top: ${domRect.y}px quantity before overflow left: ${domRect.x}px quantity before overflow right: ${window.screen.width - domRect.right}px quantity before overflow bottom: ${window.screen.height - domRect.bottom}px `); }; return ( <div ref={onRef}> {# ... #} </div> ); } export default Foobar;