[CSS] 브라우저 스크롤바(scroll bar) CSS 커스텀 디자인하기

스크롤바 CSS로 스타일 변경하는 방법

브라우저의 높이보다 콘텐츠가 길어질때, 브라우저 내에서 스크롤바가 생성됩니다.

이때 생기는 스크롤바의 스타일을 변경하는 방법에 대해 알려드리겠습니다.

하지만, 크롬이 아닌 타 브라우저에서는 최소한의 수준에서 스타일 변경이 가능한 점 참고부탁드립니다.

 

 

사이트 전체 스크롤 css 수정하기

::-webkit-scrollbar {
	width: 5px; /*스크롤바의 너비*/
}
::-webkit-scrollbar-thumb {
 background-color: black; /*스크롤바의 색상*/
}
 
::-webkit-scrollbar-track {
  background-color: yellow; /*스크롤바 트랙 색상*/
}

 

실행화면

 

 

원하는 영역에 스크롤 css 수정하기

div {height: 60px;overflow-y: auto;border: 1px solid #ccc;width: 300px;}
div::-webkit-scrollbar {
	width: 5px; /*스크롤바의 너비*/
}
div::-webkit-scrollbar-thumb {
 background-color: black; /*스크롤바의 색상*/
}
 
div::-webkit-scrollbar-track {
  background-color: yellow; /*스크롤바 트랙 색상*/
}

실행 화면

위의 예제와 같이 div내에서 스크롤바를 생성하려면 height로 높이를 지정해 준 뒤 over-flow 속성을 추가해줘야 합니다.

 

 

* 하지만 ie(익스플로러)에서는 스크롤바 css 수정이 되지 않아, 따로 별도의 플러그인을 통해 커스텀이 가능합니다.