How Can JavaScript Detect HTML Element Content Overflow When `overflow: visible`?

How to Detect Element Content Overflow in HTML with JavaScript

You have encountered an HTML element that exhibits overflowing content, despite having its overflow property set to "visible" and lacking scrollbars. Is there a way to determine if this overflow exists using JavaScript?

Addressing the Issue

Typically, one would compare the element's clientHeight and scrollHeight (or clientWidth and scrollWidth) to detect overflow. However, overflow having the "visible" setting presents a challenge.

Solution: Temporarily Modifying Overflow Property

To account for this, a detection routine is needed. The following function temporarily modifies the "overflow" style to "hidden" and checks for overflow:

function checkOverflow(el) {
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" ) {
      el.style.overflow = "hidden";
   }

   var isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

Supported Browsers

This function has been tested on Firefox 3, Firefox 40.0.2, Internet Explorer 6, and Chrome 0.2.149.30.

The above is the detailed content of How Can JavaScript Detect HTML Element Content Overflow When `overflow: visible`?. For more information, please follow other related articles on the PHP Chinese website!