Windows에서의 뷰포트 단위와 스크롤바

Windows 기기에서 스크롤바 숨기기

Windows에서 작업할 경우, vw를 추가하면 스크롤바가 나타나는 것을 경험했을 것입니다. 스크롤바가 포함되지 않은 Windows에서 vw를 사용할 때 일어나는 현상입니다. - vw: 100 = 뷰포트 너비의 100% + 스크롤바 Mac에서는 문제가 없지만, Windows에서는 스크롤바가 자동으로 표시되는 문제가 발생합니다.

스크롤바를 표시하고 싶지 않은 경우, 다음 방법 중 하나를 활용하시면 됩니다.

 

- 너비(width) 활용: vw: 100 대신 100% 사용하기

- shared.css 파일에서 body 선택자에 overflow-x: hidden을 추가해 가로 스크롤바 숨기기 (세로 스크롤바를 숨기려면 overflow-y: hidden 추가)

::-webkit-scrollbar 의사 요소를 활용하는 방법도 있습니다. shared.css 파일에 다음의 코드를 추가하면 됩니다.

1. body: :-webkit-scrollbar {
2. width:0
3. }

여러 브라우저에서 정상적으로 작동하도록 하려면 별도의 코드를 추가해야 합니다. 여기서 필요한 모든 코드는 이 블로그 게시물에 잘 정리되어 있습니다.

Windows 기기에서 스크롤바를 표시하고 싶지 않은 경우, 이와 같은 접근 방법을 따르도록 하십시오.