スクロールバーが表示されていない場合でも、JavaScript は HTML 要素内のオーバーフローしたコンテンツをどのように検出できるのでしょうか?

JavaScript を使用した HTML 要素内のオーバーフロー コンテンツの検出

Web 開発では、要素のコンテンツが要素の範囲を超えてオーバーフローしないようにすることが重要です。スクロールバーが表示されない場合でも、境界。この問題は、たとえば、サイズが固定され、「overflow」プロパティが「visible」に設定されている要素で発生する可能性があります。

要素がコンテンツをオーバーフローしたかどうかを判断するには、JavaScript を利用できます。標準的なアプローチでは、要素の client[Height|Width] とそのスクロール [Height|Width] を比較します。ただし、オーバーフロー プロパティが「visible」に設定されている場合、これらの値は同一になります。

この問題に対処するには、次の JavaScript 関数で例示されるように、より複雑な検出ルーチンが必要です。

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

この関数は、scrollHeight とscrollWidth の値を正しく計算するために、要素の「オーバーフロー」スタイルを一時的に「非表示」に設定します。計算後、元のオーバーフロー スタイルが復元されます。これらの値を要素の clientHeight および clientWidth と比較することで、要素が垂直方向または水平方向にオーバーフローしているかどうかを判断できます。

このアプローチは、Firefox 3、Firefox 40.0.2、Internet Explorer などのさまざまなブラウザーでテストされています。 6、および Chrome 0.2.149.30.

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