HTML 요소의 내용이 오버플로되는지 확인

HTML 요소의 내용이 오버플로되는지 확인

HTML 요소가 내용을 오버플로했는지(스크롤바에 관계없이) 확인하기 위해 자바스크립트를 사용할 수 있습니까?예를 들어 크기가 작고 고정된 긴 디브, 오버플로 속성이 표시되도록 설정되었으며 요소에 스크롤 막대가 없는 경우 등이 없습니다.

일반적으로, 당신은 비교할 수 있습니다.client[Height|Width]와 함께scroll[Height|Width]이것을 탐지하기 위해서는...오버플로가 보일 때 값은 동일합니다.따라서 탐지 루틴은 다음을 고려해야 합니다.

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

FF3, FF40.0.2, IE6, Chrome 0.2.149.30에서 테스트되었습니다.

비교해 보기element.scrollHeight/element.scrollWidth로.element.offsetHeight/element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element.scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight

또 다른 방법은 요소의 너비를 해당 요소의 부모 너비와 비교하는 것입니다.

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}

저는 이것들 중에 하나도 마음에 들지 않아서 이것을 썼습니다.잘 되네요!

function isOverflowY(element) {
  return element.scrollHeight != Math.max(element.offsetHeight, element.clientHeight)
}

jQuery를 사용하면 다음을 수행할 수 있습니다.

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

다음으로 변경.prop('scrollWidth')그리고..width()필요하면

언급URL : https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows