1. ホーム
  2. javascript

[解決済み] HTML要素のコンテンツがオーバーフローしているかどうかを判定する

2022-04-28 15:57:16

質問

JavaScriptを使用して、HTML要素の内容がオーバーフローしているかどうかを(スクロールバーに関係なく)確認することは可能ですか?例えば、長い div でサイズが小さく固定されており、overflow プロパティが visible に設定され、要素にスクロールバーがない場合です。

解決方法は?

通常は client[Height|Width]scroll[Height|Width] を検出するために、...しかし、オーバーフローが見えると、値は同じになります。ですから、検出ルーチンはこのことを考慮しなければなりません。

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
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;
}

FF3, FF40.0.2, IE6, Chrome 0.2.149.30 でテストしています。