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

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

HTML 要素のコンテンツが境界を越えているかどうかを判断することは、ユーザーの維持にとって非常に重要です。経験を積み、適切な視覚的表現を確保します。オーバーフローは通常、要素のクライアントの寸法 (高さと幅) とスクロールの寸法を比較することによって検出されますが、オーバーフロー プロパティが「visible」に設定されている場合、従来の方法では不十分です。

この課題を克服するには、より包括的な検出アプローチが必要です。次の JavaScript 関数は、この問題に対処します。

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

この関数は、要素を注意深く検査し、必要に応じてその「オーバーフロー」スタイルを「非表示」に調整します。次に、要素のクライアント ディメンションとスクロール ディメンションを比較します。これらの寸法のいずれかが対応するスクロール寸法より小さい場合、関数は要素のコンテンツがオーバーフローしていると結論付けます。

関数の整合性は、Firefox 3 および 40、Internet Explorer 6、クロム0.2.149.30。この堅牢なアプローチを JavaScript レパートリーに組み込むことで、あふれたコンテンツを含む要素を自信を持って識別できるようになり、表示の問題を解決し、Web アプリケーションのユーザー エクスペリエンスを向上させることができます。

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