HTML/CSS 스크롤 바 디자인

 

스크롤 바 커스텀 디자인 하기.

원하는 색상 또는 효과를 준 다음 스타일 태그 안이나 css 파일에 넣어 두면 된다.

 

<style>
/* 스크롤 바 넓이 16px */
::-webkit-scrollbar{width: 16px;}
/* 스크롤 바 기본 색상 */
::-webkit-scrollbar-track {background-color:thistle;}
/* 스크롤 구간 배경 색상 */
::-webkit-scrollbar-thumb {background-color:slateblue;} 
/* 스크롤 바 위에 마우스 올렸을 때(hover) 색상 */
::-webkit-scrollbar-thumb:hover {background-color: blueviolet;} 
/* 스크롤 상하단 버튼 넓이와 색상 */
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
width:16px; height:16px; background-color: mediumpurple;
} 
</style>

 

Result