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

CSS를 통해 스크롤바 스타일을 커스텀하는 방법에 대해 알아보자.

스크롤바 스타일에 대한 웹표준은 존재하지 않으며 webkit 브라우저에 한해서 커스텀이 가능하며,

스크롤을 커스텀하는데 주로 아래 3가지를 사용한다.

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

그 외에도 몇가지가 존재하는데 자세한것은 본문 하단에 참고 사이트를 확인해보고,

이제 저 3가지를 활용한 예제 코드를 살펴보자.

/* 스크롤바 설정*/
.box2::-webkit-scrollbar{
    width: 6px;
}

/* 스크롤바 막대 설정*/
.box2::-webkit-scrollbar-thumb{
    background: linear-gradient(#f64435, #ffe498);
    border-radius: 25px;
}

/* 스크롤바 뒷 배경 설정*/
.box2::-webkit-scrollbar-track{
    background-color: #575757;
}