JavaScript를 사용하여 브라우저 스크롤바 크기를 얻는 방법은 무엇입니까?

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

웹 개발에서 스크롤바의 크기를 결정하는 것은 미적 및 기능적 목적을 위해 매우 중요할 수 있습니다. JavaScript는 이 정보를 검색하는 다양한 방법을 제공하여 개발자가 UI 요소를 조정하고 사용자 경험을 향상시킬 수 있도록 합니다.

가로 스크롤 막대 높이 결정

가로 스크롤 막대의 높이를 얻으려면 스크롤바를 사용하는 경우 JavaScript는 다각적인 접근 방식을 사용합니다.

function getHorizontalScrollbarHeight() {
  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);

  document.body.appendChild(outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild(outer);

  return (w1 - w2);
}

세로 스크롤바 결정 너비

마찬가지로, 수직 스크롤 막대의 경우 아래 JavaScript 코드가 안정적인 솔루션을 제공합니다.

function getVerticalScrollbarWidth() {
  var inner = document.createElement('p');
  inner.style.height = "100%";
  inner.style.width = "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 = "150px";
  outer.style.height = "200px";
  outer.style.overflow = "hidden";
  outer.appendChild(inner);

  document.body.appendChild(outer);
  var w1 = inner.offsetHeight;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetHeight;
  if (w1 == w2) w2 = outer.clientHeight;

  document.body.removeChild(outer);

  return (w1 - w2);
}

이러한 JavaScript 기능을 활용하여 개발자는 브라우저 스크롤 막대의 크기를 정확하게 검색할 수 있습니다. UI 디자인과 기능을 정밀하게 제어할 수 있습니다.

위 내용은 JavaScript를 사용하여 브라우저 스크롤바 크기를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!