스크롤 바 커스텀 디자인 하기.
원하는 색상 또는 효과를 준 다음 스타일 태그 안이나 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
728x90
'Frontend > html & css' 카테고리의 다른 글
HTML5 Drag & Drop API로 간단한 DND 구현하기 (React) (0) | 2024.11.24 |
---|---|
무료 웹폰트 Pretendard CDN 적용하기 (0) | 2024.11.11 |
iframe 내부 웹 페이지의 css가 깨지는 현상 (1) | 2024.10.24 |