스크롤바가 생기면서 레이아웃이 변경되는 예시 via ishadeed.com
화면에 다 표시할 수 없을 정도로 콘텐츠가 길다면 세로 스크롤바가 생긴다. 그럼 세로 스크롤바의 폭 때문에 콘텐츠를 표시할 영역이 줄어들어 위 이미지처럼 레이아웃이 변형된다.
스크롤바가 생겨서 레이아웃이 변형되는 것을 방지하고 싶다면 scrollbar-gutter 속성을 사용하면 된다. scrollbar-gutter는 브라우저가 스크롤바 영역을 미리 확보하도록 하는 속성이다. 스크롤바 영역을 미리 확보했으므로 스크롤이 생겨도 레이아웃 변형이 없다.
<aside> 💡 참고 내용
scrollbar-gutter: auto | stable && both-edges?
.box {
padding: 1rem;
max-height: 220px;
overflow-y: auto;
scrollbar-gutter: stable;
/*
scrollbar-gutter 속성의 기본값은 auto
stable both-edges 함께 사용하면 왼쪽 끝의 영역도 확보함
*/
}
브라우저가 스크롤 영역을 미리 확보하면 세로 스크롤이 생겨도 레이아웃 변형이 없다 via ishadeed.com
Add content 버튼을 눌러서 텍스트를 추가하면 세로 스크롤바가 생기고 레이아웃이 변형된다. 반면 Add gutter 버튼을 눌러서 스크롤바 영역을 미리 확보해두면, 텍스트를 추가해도 레이아웃 변형이 없는걸 확인할 수 있다.
브라우저에서 코드펜 링크를 열고 테스트해야 제대로 확인할 수 있음
브라우저에서 코드펜 링크를 열고 테스트해야 제대로 확인할 수 있음