스크롤바 스타일에 대한 웹표준은 존재하지 않습니다.
webkit 브라우저(크롬, 오페라, 사파리)에 한해서가상요소
를 사용하여 커스텀을 해줍니다.
스크롤바와 관련된 가상요소는 여러가지가 있지만 주로 사용하는 아래 3가지가 있습니다.
작성된 코드로 확인해보겠습니다.
body::-webkit-scrollbar {
width: 10px; /* 세로축 스크롤바 길이 */
height: 20px; /* 가로축 스크롤바 길이 */
}
body::-webkit-scrollbar-track {
background-color: white; /*스크롤 바 배경 색상*/
}
body::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #6667AB; /*스크롤 바 색상*/
}
body 전체가 아니라 특정영역
을 지정해서 사용할 수 있습니다.
특정영역::코드 로 작성하게 되면 지정된 특정영역에 스크롤바 커스텀이 가능합니다.