scrollbar-width

scrollbar-width 유틸리티는 스크롤바의 두께를 조절하거나 아예 숨길 수 있게 해 줘요. 스크롤바 모양을 깔끔하게 다듬고 싶을 때 유용하답니다.

출처: 문서

본문

기본 스크롤바 두께 사용하기 (Using the default scrollbar width)

scrollbar-auto 유틸리티를 사용하면 브라우저 기본 스크롤바 두께를 사용할 수 있어요:

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

얇은 스크롤바 사용하기 (Using a thin scrollbar)

scrollbar-thin 유틸리티를 사용하면 더 얇은 스크롤바를 사용할 수 있어요:

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

스크롤바 숨기기 (Hiding scrollbars)

scrollbar-none 유틸리티를 사용하면 요소를 여전히 스크롤할 수 있게 하면서 스크롤바는 숨길 수 있어요:

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

이 유틸리티들은 브라우저 키워드인 auto, thin, none만 지원해요.

반응형 디자인 (Responsive design)

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

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

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