스크롤바(scrollbar) 꾸미기

각 아래에 대한 CSS 코드를 추가해 주면 커스텀 가능

 

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

---

예시

 

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

body::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #1b73ba; /* 스크롤바의 색 */
    border-radius: 10px; /* 스크롤바의 둥글기 */
}

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