[CSS] 스크롤바 스타일 커스텀하기

 

코드

스크롤바 css 커스텀 설정을 위해선 각 아래에 대한 CSS 코드를 추가해주면 된다.

::-webkit-scrollbar : 스크롤바 영역에 대한 설정
::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정
::-webkit-scrollbar-track  : 스크롤바 뒷 배경에 대한 설정

 

컨텐츠가 클라이언트 높이를 초과했을 때 스크롤바가 생기는 body 요소에 직접 줄 수도 있고, 

내가 overflow-y 속성을 준 요소를 지정해서 커스텀 스타일을 입힐 수 있다. 

body::-webkit-scrollbar {
    width: 5px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #7e00bf; /* 스크롤바의 색상 */
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, .1);  /*스크롤바 뒷 배경 색상*/
}

See the Pen Untitled by zisuzin (@zisuzin) on CodePen.

 

※ 참고로, IE(익스플로러) 환경에서는 적용이 안될 수 있다!

 

결과

스크롤바 커스텀으로 다른 ui요소들과 어울리는 스타일이 탄생했다.

 

확실히 안한 경우와 비교해보면 커스텀한게 더 감각있는 느낌..