CSS 스크롤바 커스텀 하는 방법 | scrollbar 디자인 적용하기

CSS 26.05.12 조회 21

CSS 스크롤바 커스텀 하는 방법 | scrollbar 디자인 적용하기

웹사이트의 완성도를 높일 때 생각보다 중요한 요소 중 하나가 바로 스크롤바 디자인입니다.

기본 브라우저 스크롤바 대신 사이트 분위기에 맞는 스타일을 적용하면 더 깔끔한 UI를 만들 수 있습니다.

이번 글에서는 CSS를 이용해 스크롤바를 커스텀하는 방법과 실무에서 자주 사용하는 스타일 예제를 함께 정리해보겠습니다.

➰➰➰

✅ CSS 스크롤바 커스텀이란?

스크롤바 커스텀은 브라우저 기본 스크롤 UI를 사이트 디자인에 맞게 변경하는 작업입니다.

특히 기업 홈페이지나 브랜드 사이트에서는 디자인 통일감을 위해 스크롤바 스타일을 함께 수정하는 경우가 많습니다.

✅ ::-webkit-scrollbar란?

::-webkit-scrollbar는 Chrome, Edge, Safari 계열 브라우저에서 스크롤바 디자인을 변경할 때 사용하는 CSS 선택자입니다.

선택자	설명
::-webkit-scrollbar	전체 스크롤바
::-webkit-scrollbar-track	스크롤바 배경
::-webkit-scrollbar-thumb	움직이는 막대(핸들)

✅ CSS scrollbar 스타일 적용 방법

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}

✅ Firefox에서 scrollbar 스타일 적용하는 방법

Firefox는 ::-webkit-scrollbar를 지원하지 않기 때문에 scrollbar-width와 scrollbar-color 속성을 사용해야 합니다.

1
2
3
4
body{
    scrollbar-width:thin;
    scrollbar-color:#111 #f5f5f5;
}
Colored by Color Scripter
cs

✅ 스크롤바 커스텀 시, 주의할 점은?

- 너무 얇은 스크롤바는 사용성이 떨어질 수 있음

- 다크모드에서는 대비를 고려해야 함

- overflow 영역이 많을 경우 스타일 충돌 체크 필요

- 모바일 환경에서는 기본 스크롤 UX를 유지하는 경우가 많음

➰➰➰

스크롤바는 작은 요소처럼 보이지만 사이트의 완성도와 사용 경험에 영향을 주는 디테일 중 하나입니다.

프로젝트 분위기에 맞는 scrollbar 스타일을 적용해 조금 더 자연스럽고 완성도 높은 UI를 구성해보세요.

블로그 전체목록

최근 포스트