scrollbar (스크롤바) css

html에서 element의 scrollbar를 css로 스타일 지정할 수 있으며, 해당 내용은 w3school 사이트에도 나와있습니다.

www.w3schools.com/howto/howto_css_custom_scrollbar.asp

How To Create a Custom Scrollbar

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-button:start
::-webkit-scrollbar-button:end
::-webkit-scrollbar-button:vertical:increment
::-webkit-scrollbar-button:vertical:decrement
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner

 

scrollbar와 관련된 css  선택자들은 위와 같이 여러개가 있는데,

이 중에 아래처럼 5개 선택자만 지정해보도록 하겠습니다.

.box::-webkit-scrollbar {
  width: 28px;
  height: 28px;
}
.box::-webkit-scrollbar-track {
  background-color: #eeeeee;
}
.box::-webkit-scrollbar-thumb {
  background-color: #cccccc;
}
.box::-webkit-scrollbar-button:start {
  background-color: #8d9cba;
}
.box::-webkit-scrollbar-button:end {
  background-color: #80b98a;
}

 

위와 같이 css 지정할 경우 각 브라우저별로 다음과 같이 표시됩니다.

파이어폭스와 인터넷익스플로러, 그리고 사파리에서는 적용되지 않고

카카오톡 인앱 브라우저에서는 스크롤바 버튼에 적용되지 않는 모습을 확인 할 수 있습니다.