CSS Scrollbar 스크롤바 꾸미기 색상 바꾸기 변경 방법

홈페이지 쇼핑몰등을 제작후에 배경색상 컨셉에 어울리게 Scrollbar 색상을 변경할 수 있다면 나의 홈페이지 느낌이 조금 더 달라질 수 있습니다. 

 

 

 

지원되는 브라우져는 Chrome, Safari 및 Opera와 같은 웹킷 브라우저에서만 가능합니다.

::-webkit-scrollbar 비표준 CSS 요소로 지원 Scrollbar 모양을 수정할 수 있습니다.

 

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

 

 

활용 예제)

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px blue;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: yellow;
  border-radius: 10px;
}

 

이제 작업을 하다가 본문 내용이 길어져 Scrollbar가 생길때 기존 디자인과 어울리지 않아, Scrollbar 색상을 변경하고 싶다면 위 CSS 코드를 활용하여 사용하시면 됩니다.

 

IE의 경우 적용되지 않습니다.