시스템 scroll 커스텀 하기

웹사이트나 애플리케이션의 스크롤바는 중요한 사용자 인터페이스(UI) 요소 중 하나입니다. 

대부분의 기본 스크롤은 많이 사용하지만, 요즘은 스크롤의 디자인도 많이 고려되서 나오고 있습니다.

브라우저에서 기본으로 제공되는 스크롤은 어떻게 커스터마이징하면될까요~?

 

::scroll 이라는 선택자를 사용하면됩니다. 의외로 간단 하답니다. 

.scroll {
  &::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: #3c3c3c;
    border-radius: 45px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #3c3c3c;
  }
}

이 코드는 WebKit 기반 브라우저 (예: Chrome, Safari)를 커스터마이징 하였습니다. 

하나씩 살펴볼까요? 

 

1. scrollbar : 스크롤바 전체를 가리킵니다. 이를 통해 스크롤바의 너비, 높이, 색상 등을 조정할 수 있습니다.
2. scrollbar-track : 스크롤바의 "트랙" 또는 배경 부분을 가리킵니다. 스크롤바 썸네일이 움직이는 부분입니다.
3. scrollbar-thumb : 스크롤바의 "썸네일" 또는 "핸들"이라고 부르는 부분입니다. 사용자가 직접 클릭하거나 드래그하여 스크롤하는 부분입니다.

 

결과는 다음과 같습니다. 

결과화면

왼쪽이 기본 시스템 스크롤이고, 오른쪽이 커스텀된 스크롤입니다. 

이렇게 스크롤 하나도 신경써서 이쁘게 만들 수 있습니다.🥹