[CSS] 스크롤바 디자인 및 커스텀하기

1. 글을 쓰는 이유

개인 프로젝트를 하던 도중 스크롤바 디자인이 애플리케이션 디자인과 어울리지 않아 스크롤바를 커스텀하고 싶어졌다. 그래서 검색을 통해 알아보았는데, 나중에도 유용하게 쓰일 것 같아 까먹지 않기 위해 적어둔다.

2. CSS를 이용하여 스크롤바를 커스텀한다.

실제 프로젝트에 쓰였던 CSS 코드를 가져온 것이다.

.TodoContent::-webkit-scrollbar {
  width:8px;  /*스크롤바의 너비*/
}

.TodoContent::-webkit-scrollbar-thumb {
  background-color:#424242; /*스크롤바의 색상*/
  border-radius: 50px;
}

.TodoContent::-webkit-scrollbar-track {
  background-color:rgba(0,0,0,0.85) /*스크롤바 트랙 색상*/
}

이것을 적용시킨 결과 아래와 같은 결과가 나타났다.