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

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

HTML 要素のコンテンツが境界を超えているかどうかを知ることは、さまざまなシナリオにとって重要です。ただし、オーバーフローのチェックは、特に要素のオーバーフロー プロパティが「visible」に設定されており、スクロールバーがない場合には注意が必要です。

この課題を克服するには、JavaScript を利用してオーバーフローを判断します。一般的なアプローチの 1 つは、要素の client[Width/Height] とscroll[Width/Height] を比較することです。ただし、オーバーフローが「可視」に設定されている場合、これらの値は同一になり、正確な検出が妨げられます。

プログラムによるオーバーフローの検出

この特殊性を考慮するには、以下を使用できます。要素の「オーバーフロー」スタイルを一時的に変更する検出ルーチン:

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

The checkOverflow function:

1. 現在のオーバーフロー プロパティ値を curOverflow に保存します。
2. オーバーフローが設定されていないか「表示」されている場合は、オーバーフローを「非表示」(スクロールバーなし) に設定します。これにより、正確なオーバーフロー検出が保証されます。
3. 要素のクライアントの寸法 (clientWidth、clientHeight) とそのスクロールの寸法 (scrollWidth、scrollHeight) を比較します。これらの次元のいずれかが小さい場合、オーバーフローを示します。
4. オーバーフロー プロパティを元の値にリセットします。
5. isOverflowing のブール結果を返します。

このルーチンFirefox、Internet Explorer、Chrome などの主要なブラウザでテストされており、オーバーフロー設定やスクロールバー。

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