[CSS] width 100vw일 때 가로(좌우) 스크롤이 생긴다면?

width 100vw일 때 가로(좌우) 스크롤이 생긴다면?

#1 vw, vh 란?

- vw = viewport width

- vh = viewport height

- viewport : 화면 Display상의 표시 영역을 뜻합니다.

즉, vw와 vh는 현재 실행중인 화면 크기에 맞춰 상대적 크기를 반환해 주는 역할을 합니다.

 

 

#2 문제 원인 (예시 코드 첨부)

body {
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 10;

  &::-webkit-scrollbar {
    background: transparent;
    width: 8px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background-color: #ccc;
    border: 0;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

 

위와 같이 css를 하면 width: 100vw; 임에도, 가로(좌우) 스크롤이 생기게 됩니다.
vw, vh는 현재 화면 전체의 상대적인 길이이기 때문에, 스크롤바를 포함한 길이를 기준으로 계산되기 때문입니다.

즉, body의 width는 100vw이고, scrollbar의 width가 8px이기 때문에 가로 스크롤이 생기게 되는 겁니다! (첨부사진의 빨간색 만큼!)

원인으로는, 전체 화면 길이가 "body 100vw" + "scrollbar 8px" 이기 때문에 화면 전체 가로 너비를 넘는 것이에요.

 

#3 문제 해결

 

위 문제를 해결하기 위해, 

width: calc(100vw - 8px);

 

으로 설정하면 됩니다. 위 코드는 scrollbar의 width를 전체 화면 너비에서 제외한 것입니다.