스크롤바 색상 바꾸기 CSS가 안 먹히는 이유

스크롤바 색상 바꾸기 CSS를 검색해서 그대로 붙였는데 화면이 바뀌지 않는다면, 대부분 크롬용 문법과 파이어폭스용 문법 중 하나만 넣었기 때문입니다. 두 브라우저는 스크롤바를 서로 다른 문법으로 처리하며, 이 사실을 모르면 코드를 몇 번을 바꿔 넣어도 원인을 찾기 어렵습니다. 이 글은 두 문법이 왜 따로 있는지, 그리고 코드를 넣어도 안 먹히는 또 다른 흔한 원인까지 검증 가능한 사실로 정리합니다.

요약 ① 크롬·사파리·엣지는 ::-webkit-scrollbar 계열 의사 요소, 파이어폭스는 scrollbar-color·scrollbar-width 표준 속성을 씁니다 — 둘은 완전히 다른 문법입니다. ② scrollbar-width는 정확한 px 지정이 불가능하고 thin·auto·none 중에서만 고를 수 있습니다. ③ CSS는 body가 아니라 실제로 overflow가 걸려 스크롤이 생기는 요소의 클래스에 지정해야 반영됩니다.

코드를 넣었는데 반은 되고 반은 안 되는 상황

사이드 메뉴나 카드 목록처럼 내부에 overflow-y: auto를 걸어 둔 영역에 브랜드 색 스크롤바를 넣으려 할 때 흔히 겪는 일입니다. 검색해서 찾은 CSS 코드를 붙였더니 크롬에서는 색이 바뀌는데, 같은 페이지를 파이어폭스로 열어 보면 여전히 회색 기본 스크롤바가 보입니다.

반대의 경우도 있습니다. 다른 글에서 가져온 코드는 파이어폭스에서는 되는데 크롬에서는 그대로인 경우입니다. 코드 자체가 틀린 게 아니라, 한쪽 브라우저 엔진용 문법만 적혀 있기 때문입니다.

크롬용 문법과 파이어폭스용 문법이 따로 있는 이유

스크롤바를 CSS로 꾸미는 방법은 브라우저 엔진에 따라 두 갈래로 나뉩니다. 하나는 크롬·사파리·엣지 같은 WebKit·Blink 계열이 쓰는 ::-webkit-scrollbar 의사 요소이고, 다른 하나는 파이어폭스가 구현한 CSS Scrollbars 표준 속성인 scrollbar-color·scrollbar-width입니다.

크롬·사파리·엣지가 쓰는 ::-webkit-scrollbar

::-webkit-scrollbar 계열은 W3C 표준이 아니라 WebKit이 먼저 만든 비표준 확장입니다. 스크롤바를 이루는 부분마다 별도 의사 요소로 나눠 지정합니다.

.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 5px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #6366f1cc;
}

-thumb:hover의 색은 손잡이 색 뒤에 cc라는 16진수 두 자리를 붙인 값입니다. cc는 10진수로 204이고, 204를 255로 나누면 약 0.8, 즉 불투명도 약 80%가 됩니다. 색을 새로 정하는 대신 원래 색에 투명도만 얹은 값입니다.

파이어폭스가 쓰는 scrollbar-color·scrollbar-width

반면 파이어폭스는 표준 속성 두 개로 끝납니다.

.custom-scrollbar {
  scrollbar-color: #6366f1 #f1f5f9;
  scrollbar-width: thin;
}

scrollbar-color는 값을 두 개 받는데 첫 번째가 손잡이(thumb) 색, 두 번째가 트랙(배경) 색입니다. 순서를 바꾸면 색이 뒤바뀌어 나타납니다.

scrollbar-width는 CSS Scrollbars 표준이 정한 값이 auto·thin·none 세 가지뿐입니다. 픽셀 단위로 두께를 지정하는 값은 표준 자체에 없습니다. 그래서 "10px처럼 정확한 두께"를 파이어폭스에서 그대로 재현하는 방법은 존재하지 않고, 기준값보다 얇으면 thin, 그 이상이면 auto로 근사할 수 있을 뿐입니다.

최근 버전의 크로미움 계열 브라우저는 scrollbar-color도 함께 인식하기 시작했지만, 오랫동안 이 속성은 파이어폭스 전용이었습니다. 그래서 지금도 두 문법을 모두 넣는 방식이 브라우저를 가리지 않고 적용되는 방법으로 쓰입니다.

두 문법을 합쳐도 안 바뀌는 경우: 선택자 문제

이 두 블록을 합쳐 넣어도 스크롤바가 안 바뀐다면 원인은 대개 선택자에 있습니다. 위 코드는 .custom-scrollbar라는 클래스가 붙은 요소에만 적용되도록 짜여 있습니다. 이 클래스를 실제로 스크롤이 발생하는 요소, 즉 overflow: auto나 overflow: scroll이 걸린 요소에 붙여야 합니다.

페이지 전체 스크롤바를 바꾸고 싶다면 body나 html에 클래스를 걸어야 하고, 카드 목록처럼 특정 영역 안에서만 스크롤이 생긴다면 그 영역을 감싸는 요소에 걸어야 합니다. body에 지정했는데 실제 스크롤은 내부 div에서 일어나는 구조라면, body 쪽 스크롤바는 바뀌어도 정작 화면에 보이는 스크롤바는 그대로입니다.

저희 도구로 확인하기.

직접 해보기 →

자주 틀리는 지점

가장 흔한 실수는 한쪽 문법만 넣고 나머지 브라우저는 신경 쓰지 않는 것입니다. ::-webkit-scrollbar만 넣으면 파이어폭스에서는 아무 효과가 없고, scrollbar-color만 넣으면 이를 인식하지 못하는 브라우저에서는 기본 스크롤바가 그대로 보입니다.

두 번째는 두께를 오해하는 경우입니다. 크롬에서 10px로 맞춰 놓고 파이어폭스도 똑같이 10px가 나올 거라 기대하면 어긋납니다. 파이어폭스는 thin 또는 auto 두 단계로만 반응하므로, 두 브라우저의 두께가 픽셀 단위까지 똑같이 맞지는 않습니다.

세 번째는 마우스 오버 색상입니다. 크롬은 :hover 의사 클래스로 손잡이 색을 따로 지정할 수 있지만, 파이어폭스의 scrollbar-color에는 오버 상태를 지정하는 표준 문법이 없습니다. 오버 시 색이 살짝 바뀌더라도 그건 브라우저가 자체적으로 처리하는 것이지 CSS로 정한 값이 아닙니다.

정리

• 크롬·사파리·엣지는 ::-webkit-scrollbar 계열 의사 요소, 파이어폭스는 scrollbar-color·scrollbar-width 표준 속성을 씁니다. 하나만 넣으면 나머지 브라우저는 기본 스크롤바 그대로입니다.
• scrollbar-width는 픽셀 단위 지정이 불가능하며 thin·auto·none 중에서만 고를 수 있습니다.
• CSS는 실제로 스크롤이 발생하는 요소(overflow가 걸린 요소)의 클래스에 지정해야 하며, body에 넣었는데 정작 다른 요소에서 스크롤이 일어나면 적용되지 않습니다.
• 마우스 오버 색상은 크롬에서는 :hover로 직접 지정할 수 있지만 파이어폭스에는 그런 문법이 없습니다.

자주 묻는 질문

스크롤바 두께를 15px처럼 정확한 값으로 지정할 수 있나요?

크롬·사파리·엣지에서는 ::-webkit-scrollbar의 width 값으로 원하는 픽셀 값을 그대로 지정할 수 있습니다. 하지만 파이어폭스의 scrollbar-width는 표준상 auto·thin·none 세 값만 허용하므로 15px 같은 정확한 값은 지정할 수 없고, thin 또는 auto 중 가까운 쪽으로만 근사할 수 있습니다.

코드를 넣었는데 크롬에서만 되고 파이어폭스에서는 그대로예요. 왜 그런가요?

::-webkit-scrollbar 문법만 넣고 scrollbar-color·scrollbar-width를 함께 넣지 않았을 가능성이 큽니다. 두 문법은 서로를 대체하지 않으므로, 두 브라우저 모두에 적용하려면 두 블록을 함께 넣어야 합니다.

생성된 CSS는 어디에 붙여넣어야 하나요?

코드에 있는 클래스명(.custom-scrollbar 등)을 실제로 스크롤이 발생하는 요소, 즉 overflow: auto나 overflow: scroll이 걸린 요소의 클래스명으로 바꾼 뒤 그 요소에 지정해야 합니다. 페이지 전체 스크롤바라면 body나 html에, 특정 영역 안에서만 스크롤되는 구조라면 그 영역 요소에 걸어야 적용됩니다.

사파리에서도 이 CSS가 적용되나요?

사파리는 WebKit 엔진을 쓰므로 ::-webkit-scrollbar 계열 의사 요소가 크롬과 같은 방식으로 적용됩니다. 파이어폭스 표준 속성인 scrollbar-color·scrollbar-width는 브라우저 버전에 따라 인식 여부가 다를 수 있으므로, 두 문법을 함께 넣어 두는 편이 안전합니다.