[CSS] 스크롤바 커스텀

 

 

 

[css]

/* 영역 설정*/
영역{
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
}


/* 스크롤바 설정*/
영역::-webkit-scrollbar{
	/*  스크롤바 막대 너비 설정 */
    width: 6px;
}

/* 스크롤바 막대 설정*/
영역::-webkit-scrollbar-thumb{
	 /* 스크롤바 막대 높이 설정    */
    height: 17%;
    background-color: rgba(255,255,255,1);
    /* 스크롤바 둥글게 설정    */
    border-radius: 10px;    
}

/* 스크롤바 뒷 배경 설정*/
영역::-webkit-scrollbar-track{
    background-color: rgba(0,0,0,0);
}

 

 

 

 

 

See the Pen scroll bar : custom by 윤재현 (@jh91) on CodePen.