스크롤 디자인 꾸미기

 

 

 

스크롤 디자인을 바꾸고 싶을 때 사용하는 소스를 공유하도록 하겠습니다.

화면 전체 디폴트 스크롤을 바꾸는 방법과 원하는 영역 스크롤을 바꾸는 방법을 나눠서 작성하였습니다.

 

 

전체 디폴트 스크롤 설정

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


::-webkit-scrollbar-thumb { 
background-color: #000; /*스크롤바의 색상*/ 
border-radius: 10px; /*스크롤바 라운드*/}


::-webkit-scrollbar-track { 
background-color: #eee; /*스크롤바 트랙 색상*/ 
border-radius: 10px; /*스크롤바 트랙 라운드*/ 
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2); /*스크롤바 트랙 안쪽 그림자*/}

 

 

특정 영역 스크롤 설정

.class {
width:100px; height: 100px; overflow-y: auto; border: 1px solid #000;} 


.class::-webkit-scrollbar { 
width: 5px; /*스크롤바의 너비*/ } 

.class::-webkit-scrollbar-thumb { 
background-color: #000; /*스크롤바의 색상*/ 
border-radius: 10px; /*스크롤바 라운드*/} 

.class::-webkit-scrollbar-track { 
background-color: #eee; /*스크롤바 트랙 색상*/ 
border-radius: 10px; /*스크롤바 트랙 라운드*/ 
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2); /*스크롤바 트랙 안쪽 그림자*/}