[css] 스크롤바 커스텀 CSS

스크롤바 스타일에 대한 웹표준은 따로 없다

 

webkit 브라우저에 한해서만 커스텀 가능하며 주로 사용하는 속성은 아래 3가지

 

body::-webkit-scrollbar {
    /* 스크롤 전체 영역 */
    width: 10px;
}

body::-webkit-scrollbar-thumb {
    /* 스크롤바 막대 */
    height: 30%;
    background-color: #666;
}

body::-webkit-scrollbar-track {
    /* 스크롤바 배경 */
    background-color: #ddd;
}

 

 

참고

https://developer.mozilla.org/ko/docs/Web/CSS/::-webkit-scrollbar

::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN