[CSS] 스크롤바 커스텀하기

아래 게시물을 통해 원하는 영역에 스크롤 적용하는 법을 알아보았다

https://12yeonii.tistory.com/102

[CSS] overflow : 원하는 div 구간에 스크롤 적용하기

 

이제 이 기본 스크롤바를 내가 원하는 대로 커스텀할 수도 있다

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


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

/* 스크롤바 막대 설정*/
영역::-webkit-scrollbar-thumb{

	 /* 스크롤바 막대 높이, 색상 설정    */
    height: 17%;
    background-color: #7d7d7d;
    
    /* 스크롤바 둥글게 설정    */
    border-radius: 2px;    
}

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

 

우선 스크롤바를 삽입할 영역을 먼저 설정해주고, 그 영역에 따라 :: 를 붙여서 커스텀 해주면 된다

scrollbar, scrollbar-thumb, scrollbar-track 이 모두 필수는 아니고, 원하는 부분만 커스텀 해도 된다
그러면 원하는 너비, 높이, 색상대로 기본 스크롤 바가 아니라 예쁜 스크롤을 커스텀 할 수 있다 !!

 

 

 

 

 

출처 : https://jh91.tistory.com/entry/css-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%B0%94-%EC%BB%A4%EC%8A%A4%ED%85%80