How to determine with what values is a div overflowing in all the directions?

user_8804904 0
Viewed 23

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.

reactjs css html javascript
1 Answers

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;
user_183253660
Related