스크롤바 엣지있게 꾸미기

 

 

  

 

Demo & Code

 

 

[Demo] 스크롤바 엣지있게 꾸미기

 

 

/* CSS */


/* 일괄 적용 */
::-webkit-scrollbar { width:1px }
::-webkit-scrollbar-track  { background-color:transparent;}
::-webkit-scrollbar-thumb:vertical {
	background:linear-gradient(45deg, transparent, red, transparent)
}



/* 요소마다 다르게 적용 */

/* 페이지 스크롤바 */
html::-webkit-scrollbar { width:6px }
html::-webkit-scrollbar-track  { background-color:#fff;}
html::-webkit-scrollbar-thumb:vertical { background-color:#000 }

/* 특정요소의 스크롤바 */
.test::-webkit-scrollbar { width:1px }
.test::-webkit-scrollbar-track  { background-color:transparent;}
.test::-webkit-scrollbar-thumb:vertical {
	background: linear-gradient(45deg, transparent, red, transparent)
}


/* 파이어폭스 */
:root, 요소명 {
	scrollbar-width: thin; /* auto, none, thin */
	scrollbar-color: #fff #000 /* 썸네일색 배경색 */
}