jQuery: How to check whether a div contains hidden “overflown” content?

The “overflow: hidden” CSS property instructs the browser to clip the excessive content that appears inside an element. One way to detect programmatically¬†(in Javascript) whether an element actually contains any “clipped” content or not, is to compare the value of the “scrollWidth” (the total width of the content, including any clipped parts), against the value of the net width of the element (that is, the width of the element freed from any eventual border widths).

The first value can be directly obtained using the Javascript’s scrollWidth property. The latter can be calculated using jQuery’s innerWidth() method. Therefore, the code should more or less look like this:

        if (element.scrollWidth > $(element).innerWidth()) {
            // Contains hidden content!
        } else {
            // All content visible!

I hope this helps!

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

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