1. Problem
Html/css/Javascript 프로그래밍을 하다보면, 브라우저의 Scrollbar Width (스크롤바 크기)를 얻어야할 때(ex. vw나 % 를 사용할 때, 가로 스크롤바가 생기는 현상 등)가 올 수 있습니다. 스크롤바 크기를 얻는 방법은 아래와 같은 Solution을 통하여 손쉽게 얻을 수 있습니다. js 를 사용하면 손쉽게 값을 얻어낼 수 있습니다.
2. Solution
const scrollbarWidth = window.innerWidth - document.body.clientWidth;
- 위와 같이 스크롤바가 있을 경우에 크기를 구하고 싶을 때가 있습니다.
window.innerWidth는 스크롤바를 포함한 브라우저 뷰포트의 너비, 화면 전체의 크기를 나타냅니다.document.body.clientWidth는 스크롤바를 제외한 뷰포트의 너비, 스크롤바를 제외한 브라우저 화면의 크기를 나타냅니다.- 두 값의 차이를 통하여 스크롤바의 크기를 얻어낼 수 있습니다.
문제 해결에 도움이 되셨으면 좋겠습니다! 읽어주셔서 감사합니다!
reference