Detect when content overflow

Question

I want to add a specific styling when my content is overflowing. The styling I would like to add is a shadow that will indicate that you can scroll to see more information.

My question is: How can I detect that my content is overflowing to add this style only when it is overflowing?

Answer 1

Here's a hook (useElementOverflows) that you can reuse, which provides a ref and a boolean indicating overflow status for an element that you want to supervise. It uses element.clientHeight/.clientWidth and element.scrollHeight/.scrollWidth to calculate overflow:

<div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">

const {useEffect, useRef, useState} = React;

function doesElementOverflow (elm) {
  const overflowsW = elm.scrollWidth > elm.clientWidth;
  const overflowsH = elm.scrollHeight > elm.clientHeight;
  return overflowsW || overflowsH;
}

function useElementOverflows () {
  const ref = useRef(null);
  const [overflows, setOverflows] = useState(false);
  useEffect(() => {
    if (ref.current) setOverflows(doesElementOverflow(ref.current));
  });
  return [ref, overflows];
}

const texts = [`hello world`];
texts.push(`
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat imperdiet sed euismod nisi porta. Faucibus a pellentesque sit amet porttitor eget dolor morbi. Mauris vitae ultricies leo integer malesuada. Tincidunt dui ut ornare lectus sit. Risus nec feugiat in fermentum posuere urna. Diam sollicitudin tempor id eu nisl nunc mi. Hac habitasse platea dictumst quisque. Tristique senectus et netus et malesuada. Tempor id eu nisl nunc mi ipsum faucibus. Egestas erat imperdiet sed euismod nisi porta lorem mollis.
Elit ut aliquam purus sit amet luctus venenatis. Diam quam nulla porttitor massa id neque aliquam. Egestas pretium aenean pharetra magna ac. Tristique magna sit amet purus gravida quis blandit. Sit amet purus gravida quis blandit turpis cursus in. Integer enim neque volutpat ac tincidunt vitae semper. Nulla porttitor massa id neque aliquam vestibulum morbi blandit. Amet luctus venenatis lectus magna. Proin libero nunc consequat interdum varius. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. At risus viverra adipiscing at in tellus integer feugiat. Sollicitudin nibh sit amet commodo nulla facilisi.
Lacus laoreet non curabitur gravida. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Nunc mattis enim ut tellus. Sed enim ut sem viverra. Sed vulputate mi sit amet mauris commodo quis. Pulvinar pellentesque habitant morbi tristique senectus et netus. Praesent semper feugiat nibh sed pulvinar proin gravida. Pharetra vel turpis nunc eget. Purus gravida quis blandit turpis cursus in hac habitasse platea. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Dolor morbi non arcu risus quis varius quam quisque. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Rhoncus est pellentesque elit ullamcorper dignissim cras.
Felis eget velit aliquet sagittis id. Turpis egestas pretium aenean pharetra magna ac. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Vitae turpis massa sed elementum tempus egestas sed. Viverra vitae congue eu consequat ac felis donec et. Euismod in pellentesque massa placerat duis ultricies lacus sed. Diam volutpat commodo sed egestas egestas fringilla. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Adipiscing diam donec adipiscing tristique risus nec. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Eget nulla facilisi etiam dignissim diam. Tincidunt id aliquet risus feugiat in ante metus dictum at. Mauris pharetra et ultrices neque ornare aenean. Tristique senectus et netus et.
Metus vulputate eu scelerisque felis imperdiet proin fermentum. Mauris nunc congue nisi vitae. Auctor eu augue ut lectus. Nunc sed id semper risus in. Nam libero justo laoreet sit amet cursus sit. Porttitor leo a diam sollicitudin. In dictum non consectetur a erat nam at. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Vestibulum morbi blandit cursus risus. Nisi vitae suscipit tellus mauris a diam maecenas. Dui nunc mattis enim ut tellus. Facilisis gravida neque convallis a cras semper auctor neque. In mollis nunc sed id semper. Bibendum arcu vitae elementum curabitur vitae nunc sed. Elit ut aliquam purus sit amet.
`.trim());

function Example () {
  const [divRef, divOverflows] = useElementOverflows();

  const divStyle = {
    border: `4px solid ${divOverflows ? 'red' : 'green'}`,
    height: '4rem',
    overflow: 'auto',
  };

  const [textIndex, setTextIndex] = useState(0);
  const handleClick = () => setTextIndex(i => (i + 1) % 2);

  return (
    <div style={{fontFamily: 'sans-serif'}}>
      <div ref={divRef} style={divStyle}>
        { texts[textIndex].split('\n').map((line, i) => <p key={i}>{line}</p>) }
      </div>
      <button onClick={handleClick}>Change text</button>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>