[HTML/CSS] 스크롤바 표시로 인한 레이아웃 변형 방지하기 - Scrollbar Gutter

스크롤바가 생기면서 레이아웃이 변경되는 예시 - 이미지 출처 ishadeed.com

화면에 다 표시할 수 없을 정도로 콘텐츠가 길다면 세로 스크롤바가 생긴다. 그럼 세로 스크롤바의 폭 때문에 콘텐츠를 표시할 영역이 줄어들어 위 이미지처럼 레이아웃이 변형된다.

 

스크롤바가 생겨서 레이아웃이 변형되는 것을 방지하고 싶다면 scrollbar-gutter 속성을 사용하면 된다. scrollbar-gutter는 브라우저가 스크롤바 영역을 미리 확보하도록 하는 속성이다. 스크롤바 영역을 미리 확보했으므로 스크롤이 생겨도 레이아웃 변형이 없다.

 

scrollbar-gutter: auto | stable && both-edges?

.box {
  padding: 1rem;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* 
    scrollbar-gutter 속성의 기본값은 auto
    stable both-edges 함께 사용하면 왼쪽 끝의 영역도 확보함 
  */
}

 

브라우저가 스크롤 영역을 미리 확보하면 세로 스크롤이 생겨도 레이아웃 변형이 없다 ▼

이미지 출처 ishadeed.com

 

참고 내용

---

• gutter는 스크롤바가 움직이는 track의 컨테이너 영역 정도로 이해하면 된다.
• scrollbar-gutter 속성을 사용하면 overflow를 숨기거나 발생하지 않아도 항상 스크롤 영역을 확보한다.
• 콘텐츠 위에 떠다니는 투명한 오버레이 스크롤바에선 scrollbar-gutter 속성을 적용할 수 없다.

 

 

참고 코드펜

---

Add content 버튼을 눌러서 텍스트를 추가하면 세로 스크롤바가 생기고 레이아웃이 변형된다. 반면 Add gutter 버튼을 눌러서 스크롤바 영역을 미리 확보해두면, 텍스트를 추가해도 레이아웃 변형이 없는걸 확인할 수 있다. 

 

See the Pen Scrollbar Gutter - Demo by Ahmad Shadeed (@shadeed) on CodePen.

 

 

 

레퍼런스

---

• Custom Scrollbars In CSS - Ahmad Shadeed
• scrollbar-gutter | CSS-Tricks
• scrollbar-gutter  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요