scrollbar-gutter

scrollbar-gutter 유틸리티는 스크롤바가 있어야 하는 공간을 미리 예약해 둘지를 결정해 줘요. 요소가 넘치지 않아도 레이아웃이 흔들리지 않게 하고 싶을 때 유용하답니다.

출처: 문서

본문

클래스	CSS
`scrollbar-gutter-auto`	`scrollbar-gutter: auto;`
`scrollbar-gutter-stable`	`scrollbar-gutter: stable;`
`scrollbar-gutter-both`	`scrollbar-gutter: stable both-edges;`

스크롤바 공간 예약하기 (Reserving space for the scrollbar)

scrollbar-gutter-stable 유틸리티를 사용하면 요소가 넘치지 않아도 스크롤바를 위한 공간을 미리 예약할 수 있어요:

<div class="scrollbar-gutter-stable overflow-auto ...">
  <!-- ... -->
</div>

양쪽에 공간 예약하기 (Reserving space on both sides)

scrollbar-gutter-both 유틸리티를 사용하면 요소의 양쪽에 동일한 gutter(간격) 공간을 예약할 수 있어요:

<div class="scrollbar-gutter-both overflow-auto ...">
  <!-- ... -->
</div>

기본 gutter 사용하기 (Using the default gutter)

scrollbar-gutter-auto 유틸리티를 사용하면 브라우저가 보통 스크롤바를 보여줄 때만 gutter 공간을 예약해요:

<div class="scrollbar-gutter-auto overflow-auto ...">
  <!-- ... -->
</div>

반응형 디자인 (Responsive design)

scrollbar-gutter 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<div class="scrollbar-gutter-auto md:scrollbar-gutter-stable ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.