🎨 스크롤바 디자인 커스터마이징 (웹킷 vs 크로스 브라우징 이슈)

🎨 스크롤바 디자인 커스터마이징 (웹킷 vs 크로스 브라우징 이슈)

웹사이트의 스크롤바도 스타일링할 수 있다는 사실, 알고 계셨나요? 디자인 일관성을 위해 스크롤바를 커스터마이징하고 싶지만, 브라우저마다 지원 방식이 다릅니다. 이 글에서는 웹킷 기반 브라우저를 중심으로 스크롤바 커스터마이징 방법과 그 한계를 정리합니다.

---

1️⃣ 기본 스크롤바는 브라우저마다 다르다

• Chrome, Edge, Safari → 웹킷 기반 → 커스터마이징 가능
• Firefox → scrollbar-color, scrollbar-width만 지원
• IE/구버전 Edge → 제한적 지원 또는 불가

---

2️⃣ WebKit 기반 커스터마이징 방법

/* 전체 스크롤바 너비 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 스크롤 트랙 (배경) */
::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 6px;
}

/* 스크롤 핸들 (움직이는 부분) */
::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 6px;
}

/* 호버 시 색상 변화 */
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

👉 위 코드는 가로/세로 스크롤 모두에 적용됩니다. border-radius로 둥글게, background로 색상 제어 가능합니다.

---

3️⃣ Firefox에서 가능한 최소 스타일

/* 스크롤 색상 설정 */
.scroll-area {
  scrollbar-color: #999 #f0f0f0; /* thumb, track */
  scrollbar-width: thin;         /* auto | thin | none */
}

👉 scrollbar-color는 thumb(핸들)과 track(배경) 색상을 지정합니다.

---

4️⃣ 특정 영역에만 스크롤바 커스터마이징

.scroll-box {
  max-height: 300px;
  overflow-y: auto;
}

.scroll-box::-webkit-scrollbar {
  width: 8px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: #007bff;
  border-radius: 4px;
}

👉 전체 페이지가 아닌 특정 div의 스크롤바를 따로 꾸밀 수 있습니다.

---

5️⃣ dark 모드에서 동적 변경

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: #555;
  }
}

👉 시스템 테마에 따라 스크롤바 색상을 다르게 지정할 수 있습니다.

---

6️⃣ 한계와 주의 사항

• 스크롤바 커스터마이징은 접근성(contrast)을 해치지 않도록 주의
• 모바일에서는 대부분 기본 스크롤바 강제 적용됨
• Firefox/IE/모바일은 완전한 제어 불가 → 심플한 스타일 유지 권장

---

📌 요약 정리

• WebKit 기반에서는 ::-webkit-scrollbar 계열로 자유롭게 스타일링 가능
• Firefox는 scrollbar-color 등 제한적 지원
• 특정 영역에만 적용하거나 다크모드 대응도 가능
• 접근성과 호환성을 고려해 심플한 커스터마이징이 가장 안전

---

📌 다음 글 예고

다음 글: “CSS 트랜지션(transition) vs 애니메이션(animation)의 차이”에서는 요소 변화에 움직임을 줄 때 두 방식의 차이와 선택 기준을 설명합니다.