스크롤 막대 없이 HTML 콘텐츠 오버플로를 어떻게 감지할 수 있습니까?

스크롤 막대 없이 HTML 요소에서 콘텐츠 오버플로 감지

많은 개발자는 HTML 요소의 콘텐츠가 눈에 보이는 경계를 넘어 확장되는 시기를 판단해야 하는 과제에 직면합니다. 특히 스크롤바가 없는 경우에는 더욱 그렇습니다. 이 작업은 요소의 오버플로 속성이 "visible"로 설정된 경우 더욱 복잡해집니다.

해결책

해결책은 요소의 클라이언트 크기([Height|Width)를 비교하는 데 있습니다. ])를 스크롤 크기([높이|너비])로 바꿉니다. 그러나 오버플로가 표시되면 이러한 값은 동일합니다. 이를 설명하기 위해 오버플로 스타일을 일시적으로 "숨김"으로 수정하고 오버플로 조건을 확인한 다음 원래 오버플로 값을 복원할 수 있습니다.

구현

아래 코드 조각은 이를 수행하는 JavaScript 함수 checkOverflow()를 제공합니다. 감지:

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

사용

대상 요소에서 checkOverflow() 함수를 호출하여 오버플로된 콘텐츠가 있는지 확인합니다. 이 함수는 오버플로가 있는지 여부를 나타내는 부울 값을 반환합니다.

테스트

이 루틴은 Firefox 3, Firefox 40.0.2, Internet Explorer에서 성공적으로 테스트되었습니다. 6, 크롬 0.2.149.30.

위 내용은 스크롤 막대 없이 HTML 콘텐츠 오버플로를 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!