JavaScript는 스크롤 막대가 표시되지 않는 경우에도 HTML 요소에서 오버플로된 콘텐츠를 어떻게 감지할 수 있습니까?

JavaScript를 사용하여 HTML 요소에서 오버플로된 콘텐츠 감지

웹 개발에서는 요소의 콘텐츠가 해당 요소의 범위를 넘어서 오버플로되지 않도록 하는 것이 중요합니다. 스크롤바가 보이지 않더라도 경계. 예를 들어, 이 문제는 크기가 고정되어 있고 "overflow" 속성이 "visible"로 설정된 요소에서 발생할 수 있습니다.

요소가 콘텐츠를 오버플로했는지 확인하려면 JavaScript를 활용할 수 있습니다. 표준 접근 방식은 요소의 클라이언트[높이|너비]와 스크롤[높이|너비]를 비교하는 것입니다. 그러나 오버플로 속성이 "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, 크롬 0.2.149.30.

위 내용은 JavaScript는 스크롤 막대가 표시되지 않는 경우에도 HTML 요소에서 오버플로된 콘텐츠를 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!