본문 바로가기

탐구, DISCOVER/Web development

[HTML/CSS] 간단하게 스크롤바 색상 바꾸기

Scrollbar

scrollbar-webkit-css-title


스크롤바 색상을 바꾸는 것만으로 홈페이지 느낌이 달라지지요. 개인적으로 톤이 강한 색을 많이 쓰는 웹페이지에 더 잘 어울리는 것 같아요. 예를 들어 블랙/화이트 배경을 가진 홈페이지에 포인트로 줘도 좋겠고, 테마 색상에 맞춰 보색 효과를 주기에도 유용하고요. 간단하게 CSS로 스크롤바 색상 변경하는 법을 함께 알아 볼게요. 단, 이 방법은 파이어폭스랑 익스플로러 IE/Edge와는 호환되지 않고 Webkit 브라우저인 크롬, 사파리, 오페라에서만 활용 가능합니다.


Style/CSS


아래 소스를 html 파일 <head><style> 코드 </style></head> 사이에 추가하거나 CSS 파일 body 뒤에 바로 붙여 넣기 하면 됩니다. (예: body::-webkit-scrollbar....)


::-webkit-scrollbar{width: 16px;}
::-webkit-scrollbar-track {background-color:#f1f1f1;}
::-webkit-scrollbar-thumb {background-color:#f1ef79;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: #555;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
width:16px;height:16px;background:#f1ef79;} 


흰색 글자로 표기된 부분을 원하는 넓이와 색으로 변경해 주세요. ▶컬러 고르기 

둥근 모서리 효과를 주고 싶지 않으면 border-radius 부분 삭제, 따로 버튼에 효과를 주고 싶지 않으면 button 부분 삭제 등 스타일을 주고 싶은 부분만 사용하면 됩니다. 그 외 원하는 스타일이 있다면 추가로 부문별 CSS 스타일을 추가해 주시고요! 


 scrollbar-webkit-css

더 자세히 살펴보면,

::-webkit-scrollbar{width: 스크롤바 넓이px;}

::-webkit-scrollbar-track {background-color:트랙 배경 색상;}

::-webkit-scrollbar-thumb {background-color:바 색상;border-radius: 바 둥근 모서리 정도px;}

::-webkit-scrollbar-thumb:hover {background: 마우스를 올렸을 때 색상;}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {

width:버튼 넓이px(보통 스크롤바 넓이랑 같이 맞춰줘요);height:버튼 높이px;background:버튼 색상;} 




참 쉽지요? :)