> 웹 프론트엔드 > JS 튜토리얼 > JavaScript를 사용하여 브라우저 스크롤바 크기를 얻는 방법은 무엇입니까?

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

Patricia Arquette
풀어 주다: 2024-11-28 17:33:19
원래의
873명이 탐색했습니다.

How to Get Browser Scrollbar Dimensions Using 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿