scrollbar-gutter
스크롤바의 너비를 미리 차이하게 할 수 있다.
overflow:hidden 이라도 스크롤바의 너비가 미리 차지하므로 viewport 가 변화하는 걸 막을 수 있다.
scrollbar-gutter:auto;
=> 기본값. 스크롤바가 있을 때만 영역을 차지한다. 스크롤바 유무에 따라서 콘텐츠의 너비가 변경된다.
scrollbar-gutter:stable;
=> 스크롤바가 없는 상태에서도 영역을 미리 차지한다. 스크롤바 유무에 상관없이 콘텐츠의 너비가 일정하다.(항상 스크롤바 영역이 있으므로)
scrollbar-gutter:stable both-edges;
=> 스크롤바가 없는 상태에서도 좌우 영역을 미리 차지한다. 스크롤바 유무에 상관없이 콘텐츠의 너비가 일정하다. (항상 스크롤바 영역이 있으므로). 좌우가 같은 영역을 차지하므로 콘텐츠는 중앙에 위치한다.
! 주의
오버레이 스크롤바 상태(모바일 브라우저 등)이 경우 적용 안된다.
오버레이 스크롤바 자체는 영역을 차지하지 않기 때문에 적용에 의미가 없다.(콘텐츠 위에 떠있는 형식으로 표시됨)
overflow:hidden;
scrollbar-gutter:stable; or scrollbar-gutter:stable both-edges;
=> 스크롤바없어도 콘텐츠의 너비(or viewport)는 항상 일정하게 유지하는 방법.
