[CSS] 브라우져 스크롤바 스타일 변경 (모질라, 파이어 폭스)

2018년부터 일부의 스크롤바 스타일의 적용이 가능해졌습니다. 가능한 속성은 아래와 같습니다.
scrollbar-width
scrollbar-color


@ scrollbar-width
스크롤바의 크기를 조절합니다. 선택 가능한 값은 3가지 입니다.
auto : 기본값으로 보통 크기로 설정합니다.
none : 스크롤바를 숨깁니다. 단, 동작은 합니다.
thin : 얇은 스크롤바를 보여줍니다.

scrollbar-color: black white; // 검은색 Thumb과 흰색 Track 설정시
body {
  scrollbar-width: thin;
  scrollbar-color: #e8e8e8 transparent;
}

 

 

! IE에서 스크롤바를 변경할 경우
IE(인터넷익스플로러) 역시 매우 제한적입니다. 크기, 이미지 등 많은 값을 조절할 수 없으며 간단한 색 변경 등만 가능합니다.

body {
  scrollbar-face-color: #e0e0e0;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: none;
  scrollbar-highlight-color: #e0e0e0;
  scrollbar-3dlight-color: none;
  scrollbar-shadow-color: #e0e0e0;
  scrollbar-darkshadow-color: none;
}

 

숨기는 경우

-ms-overflow-style: none;
overflow: auto;