「overflow:visible」の場合、JavaScript は HTML 要素コンテンツのオーバーフローをどのように検出できますか?

JavaScript を使用して HTML の要素コンテンツのオーバーフローを検出する方法

オーバーフロー プロパティがあるにもかかわらず、オーバーフローしたコンテンツを示す HTML 要素に遭遇しました。 「表示」に設定されており、スクロールバーがありません。 JavaScript を使用してこのオーバーフローが存在するかどうかを確認する方法はありますか?

問題への対処

通常、要素の clientHeight とscrollHeight (または clientWidth とscrollWidth) を比較します。オーバーフローを検出します。ただし、「表​​示」設定を持つオーバーフローには課題があります。

解決策: オーバーフロー プロパティを一時的に変更する

これを解決するには、検出ルーチンが必要です。次の関数は、「オーバーフロー」スタイルを一時的に「非表示」に変更し、オーバーフローをチェックします:

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

サポートされているブラウザ

この関数は Firefox 3 でテストされています。 、Firefox 40.0.2、Internet Explorer 6、および Chrome 0.2.149.30.

以上が「overflow:visible」の場合、JavaScript は HTML 要素コンテンツのオーバーフローをどのように検出できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。