커스텀 스크롤바 디자인

브라우저의 투박한 기본 스크롤바를 둥글고 예쁜 색상으로 꾸며주는 Webkit CSS 코드를 생성합니다.

스크롤바 두께 (Width): 12px

모서리 둥글기 (Border Radius): 6px

막대(Thumb) 색상

막대 마우스 오버(Hover) 색상

배경 레일(Track) 색상

실시간 미리보기 (아래로 스크롤해 보세요)

스크롤 컨텐츠 영역

CSS Code

/* Works on Chrome, Edge, and Safari */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}