스크롤 스타일변경

스크롤스타일을 변경하기위한 많은 속성들이 있지만 기본적인 속성만 소개해보자.

/* 스크롤의 컨테이너 역할을 하는 놈 */
::-webkit-scrollbar {
    width: 12px;
}

/* 스크롤 Thumb: 스크롤이 이리저리 이동할 때 활용되는놈. */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
/* 스크롤 track: 스크롤이 이리저리 이동할 때 Thumb이 이리 저리 움직이는 놈이라면 track은 그 바탕 rail이 되는 놈. */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

참조링크

• WebKit의 사용자 지정 스크롤바
• 스크롤바디자인예
• MDN ::-webkit-scrollbar