How to check with JavaScript if div has overflowing elements?

Spread the love

Sometimes, we want to check with JavaScript if div has overflowing elements.

In this article, we’ll look at how to check with JavaScript if div has overflowing elements.

How to check with JavaScript if div has overflowing elements?

To check with JavaScript if div has overflowing elements, we can compare the element’s height with its scroll height.

For instance, we write

<div class="overflow-hidden" style="height: 20px">
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

to add nested divs.

Then we write

const element = document.querySelector(".overflow-hidden");

if (
  element.offsetHeight < element.scrollHeight ||
  element.offsetWidth < element.scrollWidth
) {
  // ...
} else {
  // ...
}

to select the outer div with querySelector.

And we get its height with offsetHeight.

We get its content’s full height with scrollHeight.

We do the same with the width.

If offsetHeight is less than scrollHeight then the height overflows.

If offsetWidth is less than scrollWidth then the width overflows.

Conclusion

To check with JavaScript if div has overflowing elements, we can compare the element’s height with its scroll height.

Leave a Reply

Your email address will not be published. Required fields are marked *