スクロールバーのない HTML コンテンツのオーバーフローを検出するにはどうすればよいですか?

スクロールバーを使用しない HTML 要素のコンテンツ オーバーフローの検出

多くの開発者は、HTML 要素のコンテンツが目に見える境界を越える場合を判断するという課題に直面しています。特にスクロールバーが存在しない場合。要素のオーバーフロー プロパティが「visible」に設定されている場合、このタスクはより複雑になります。

解決策

解決策は、要素のクライアントの寸法 ([Height|Width] を比較することにあります) ]) とスクロールの寸法 ([高さ|幅])。ただし、オーバーフローが発生している場合、これらの値は等しくなります。これを解決するには、オーバーフロー スタイルを一時的に「非表示」に変更し、オーバーフロー条件をチェックして、元のオーバーフロー値を復元します。

実装

以下のコード スニペットは、これを実行する JavaScript 関数 checkOverflow() を提供します。検出:

// Determine 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;
}

使用法

ターゲット要素で checkOverflow() 関数を呼び出して、オーバーフローしたコンテンツがあるかどうかを確認します。この関数は、オーバーフローが存在するかどうかを示すブール値を返します。

テスト中

このルーチンは、Firefox 3、Firefox 40.0.2、Internet Explorer で正常にテストされています。 6、および Chrome 0.2.149.30.

以上がスクロールバーのない HTML コンテンツのオーバーフローを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。