각 아래에 대한 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*/
}
'Css' 카테고리의 다른 글
스크롤 바(scrollbar) 없애기 (0) | 2023.03.28 |
---|---|
border에 그라디언트 넣기 (0) | 2023.03.28 |
폰트어썸 before, after (FontAwesome) Css에서 사용하기 (0) | 2023.03.24 |
텍스트 문단 수 줄이기 (0) | 2023.03.24 |
input radio 버튼 꾸미기 (0) | 2023.03.23 |