스크롤바 꾸미기

by

아래 각각에 대한 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*/
}
'추천 관련글,