사용법 (SCSS 기준)

1. 전체 스크롤바

// scss 기준


&::-webkit-scrollbar {
  // color or width로 가장 먼저 설정해주어야함.
  // 그러면 스크롤바가 뷰에 보이기에는 없는 것처럼 보이며
  // 이때부터는 전부터 커스텀 해주어야 함
  // 실제로는 스크롤 동작
  width: 16px;
};

2. 실제 스크롤의 컨트롤 가능한 부분


&::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: skyblue;
};

-webkit-scrollbar-track 설정 후

3. track 범위 중 실제 스크롤이 움직이는 부분


&::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 8px;
  border: 5px solid #1b1b1b;
};

-webkit-scrollbar-thumb 설정 후

4. 최상, 하단에 있는 스크롤 업 다운 화살표 버튼


&::-webkit-scrollbar-button {
  // 커스텀 할떄는 기본적으로 버튼이 없음
  background-color: red;
};

-webkit-scrollbar-button 설정 후

5. track 범위 중 thumb를 제외한 부분

track에서 설정한 css 보다 track-piece의 우선순위가 높음


&::-webkit-scrollbar-track-piece {
  background-color: violet;
  border: 3px solid black;
  border-radius: 4px;
};

-webkit-scrollbar-track-piece 설정 후

6. X축까지 스크롤이 생길때 X축과 Y축 스크롤의 모서리 부분


&::-webkit-scrollbar-corner {
  // x축 스크롤이 있어야 보임
  background-color: blue;
};

-webkit-scrollbar-corner 설정 후 (하단 파란부분)

7. 일부 요소에서 사용되는 드래그로 사이즈 조절 기능

e.g. textarea tag


&::-webkit-resizer {
  background-color: red;
};

-webkit-resizer 설정 후

참고 사진

scrollbar selector 통합본

피드백은 언제나 환영입니다!

스크롤바 커스텀 하기

사용법 (SCSS 기준)

1. 전체 스크롤바

참고 사진