[Html/css/Javascript] 브라우저의 Scrollbar Width (스크롤바 크기)를 얻는 방법



1. Problem

Html/css/Javascript 프로그래밍을 하다보면, 브라우저의 Scrollbar Width (스크롤바 크기)를 얻어야할 때(ex. vw나 % 를 사용할 때, 가로 스크롤바가 생기는 현상 등)가 올 수 있습니다. 스크롤바 크기를 얻는 방법은 아래와 같은 Solution을 통하여 손쉽게 얻을 수 있습니다. js 를 사용하면 손쉽게 값을 얻어낼 수 있습니다.

2. Solution

image

const scrollbarWidth = window.innerWidth - document.body.clientWidth;
  • 위와 같이 스크롤바가 있을 경우에 크기를 구하고 싶을 때가 있습니다.
  • window.innerWidth 는 스크롤바를 포함한 브라우저 뷰포트의 너비, 화면 전체의 크기를 나타냅니다.
  • document.body.clientWidth 는 스크롤바를 제외한 뷰포트의 너비, 스크롤바를 제외한 브라우저 화면의 크기를 나타냅니다.
  • 두 값의 차이를 통하여 스크롤바의 크기를 얻어낼 수 있습니다.

문제 해결에 도움이 되셨으면 좋겠습니다! 읽어주셔서 감사합니다!


reference