CSS로 스크롤바 디자인 바꾸는 방법 :: Edge, Chrom, Opera AND Firefox까지!

 

 

 

디자인을 하다보면 우측에 자동으로 생성되는 스크롤의 컬러가 거슬릴 때가 있다. 그레이 색상에 투박한 네모가 기본 디자인이니! 분명 신경쓰이지 않을때는 아무렇지도 않다. 하지만 한번 눈에 밟히면 계속 거슬리는게 디자인이라. 누군가의 눈에 거슬릴 수 있는 회색 색상의 기본 스크롤바 디자인을 수정해보려고 한다. 아래 소스를 보시라.

 

 

See the Pen Untitled by kihyun (@hidesigner2) on CodePen.

 

스크롤바 부분별 자세한 명칭 알아보기

디자인을 수정하기에 앞서 명칭을 먼저 파악해 이해력을 쑤욱 올려보자.

 

 

 

---

스크롤바 디자인 바꾸기 for Edge, Chrom, Opera

 

[ ::-webkit-  ] 위 소스에서도  보시다시피 접두어가 붙는 것을 보니, 지원하는 브라우저가 한정적이다. Webkit 엔진을 채용한 엣지, 크롬, 오페라 브라우저에만 적용이 되는 CSS이다. 과거에는 Edge에서는 적용이 안되었지만, Edge도 최근에 크롬 엔진으로 갈아(?)타면서 함께 적용이 된다. 아래 정리해 놓은 소스를 살펴보자.

::-webkit-scrollbar {/* 스크롤바 전체*/}

::-webkit-scrollbar-track { /* 스크롤바 트렉 (바탕) */ }

::-webkit-scrollbar-thumb { /* 스크롤바 잡는 핸들 */}
::-webkit-scrollbar-thumb:hover { /* 스크롤바 잡는 핸들 : 마우스오버 */ }
::-webkit-scrollbar-thumb:active { /* 스크롤바 잡는 핸들 : 액티브 */ }

::-webkit-scrollbar-button:start:decrement {/* 스크롤바 위 방향 버튼 */}
::-webkit-scrollbar-button:start:decrement:hover {/* 스크롤바 위 방향 버튼 : 마우스오버 */}

::-webkit-scrollbar-button:end:increment { /* 스크롤바 아래 방향 버튼 */ }
::-webkit-scrollbar-button:end:increment:hover { /*스크롤바 아래 방향 버튼:마우스오버*/ }  

주의할 점

이 부분에서 많이 헤맷다. 다른건  유지하고 간단히 Thumb(핸들) 부분의 색깔만 변경하려고 했더니, 그냥 아무것도 안보인다. [:hover] 나 [:active]와 같은 가상 선택자는 작성하지 않아도 무방하지만, 기본적으로 scrollbar / track / thumb / button:start:decrement / button:end:increment 의 모든 부분들을 작성해주어야 한다.

 

 

 

 

브라우저 지원사양 

Firefox는 지원 안되는데요? Firefox 작성 방법!

보시다시피 IE와 Firefox는 지원하지 않는다. IE는 MS에서도 버린지 오래. 필자도 버린다. 과감히. (디자인적인 부분에서 모든 브라우저를 맞추기 위해 하향 디자인 하는 것은 옳지 않다.) Firefox에서 적용하는 방법은 모질라 디벨로퍼에서 자세히 볼 수있다. 

.scroll_new { scrollbar-color:#f1dfa2 white }

간단히 말해서 위에 이 한줄 넣어주면 된다. 스크롤의 디자인을 바꾸고 싶은 경로(.scroll_new)에 scrollbar-color를 작성한다. 앞에 [#f1dfa2] 가 Thumb, 뒤에 [white]가 배경 색깔이다.

 

 

부분적인 scrollbar 디자인만 바꾸고 싶어요!

그렇다면  ::-webkit- 앞에 스크롤바 경로를 넣어주면 끝이다. 

::-webkit-scrollbar {/* 스크롤바 전체*/}
➡ .scrollbar::-webkit-scrollbar

::-webkit-scrollbar-track { /* 스크롤바 트렉 (바탕) */ }
➡ .scrollbar::-webkit-scrollbar-track

::-webkit-scrollbar-thumb { /* 스크롤바 잡는 핸들 */}
➡ .scrollbar::-webkit-scrollbar-thumb

::-webkit-scrollbar-button:start:decrement {/* 스크롤바 위 방향 버튼 */}
➡ .scrollbar::-webkit-scrollbar-button:start:decrement

::-webkit-scrollbar-button:end:increment { /* 스크롤바 아래 방향 버튼 */ }
➡ .scrollbar::-webkit-scrollbar-button:end:increment