JavaScript를 사용하여 브라우저 스크롤 막대의 크기를 어떻게 얻을 수 있습니까?

JavaScript에서 브라우저 스크롤바 크기 얻기

동적 웹페이지를 생성하려면 브라우저에서 스크롤바 크기를 결정하는 것이 필수적입니다. 이 기사에서는 JavaScript를 사용하여 가로 스크롤 막대의 높이와 세로 스크롤 막대의 너비를 결정하는 방법을 살펴봅니다.

해결책:

아래 제공된 코드 조각은 영리한 수직 스크롤바 기술.

function getScrollBarWidth() {
  // Create elements to measure scrollbar size
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild(inner);

  // Add elements to the DOM
  document.body.appendChild(outer);

  // Calculate scrollbar width
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  // Remove elements from the DOM
  document.body.removeChild(outer);

  // Return scrollbar width
  return (w1 - w2);
}

설명:

이 함수는 내부 요소(내부)와 외부 요소(외부)의 두 요소를 생성합니다. 내부 요소의 크기는 고정되어 있지만 외부 요소에는 오버플로 속성이 설정되어 있지 않습니다. 외부 요소에서 오버플로를 활성화한 후 이러한 요소 간의 너비 차이는 세로 스크롤 막대의 너비를 나타냅니다.

위 내용은 JavaScript를 사용하여 브라우저 스크롤 막대의 크기를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!