☰

要素のコンテンツがオーバーフローしていないか確認しますか? 質問する

tag-icon • tag-icon javascript css overflow
要素のコンテンツがオーバーフローしていないか確認しますか? 質問する

要素がオーバーフローしたかどうかを検出する最も簡単な方法は何ですか?

私の使用例では、特定のコンテンツ ボックスの高さを 300 ピクセルに制限します。内部のコンテンツがそれよりも高い場合は、オーバーフローで切り取ります。ただし、オーバーフローした場合は「詳細」ボタンを表示し、オーバーフローしない場合はそのボタンを表示しません。

オーバーフローを検出する簡単な方法はありますか、それとももっと良い方法がありますか?

ベストアンサー1

要素は垂直方向、水平方向、またはその両方でオーバーフローしている可能性があります。この関数は、DOM 要素がオーバーフローしている場合にブール値を返します。

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}


function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

var els = document.getElementsByClassName('demos');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  el.style.borderColor = (isOverflown(el) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown.");
}
.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}
<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

ES6の例:

const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => {
    return scrollHeight > clientHeight || scrollWidth > clientWidth;
}

おすすめ記事