I would like to know if there is any way by which I can determine with what quantities a div is overflowing in any direction. Searches in the internet only took me to the point where I can figure out the total horizontal or vertical values with which a div is overflowing. But, I wanted to know the exact top, right, bottom, left values.
You can use getBoundingClientRect and compute value on DOMRect value.
This API has a good browser support.
Inside a Reactjs component you should use ref for access to div at 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;