본문 바로가기
> IT 노트/활용

[CSS] 스크롤 바 꾸미기

by 자몽주스 2024. 8. 20.
728x90

::-webkit-scrollbar {
  width: 26px; /* 세로 스크롤바 너비 */
  height: 26px; /* 가로 스크롤바 높이 */
}

::-webkit-scrollbar-thumb {
  background-image: url("scrollbar.png");
  /* background-position: center; 
  background-size: contain; */
}

::-webkit-scrollbar-track {
  background: rgba(2, 39, 253, 0.5); /*스크롤바 뒷 배경 색상*/
}

width 와 height 를 동일하게 줘서 스크롤바 크기를 동일 시 만듦.

아래 스크롤 바 삭제 
::-webkit-scrollbar {
  width: 26px; /* 세로 스크롤바 너비 */
  height: 26px; /* 가로 스크롤바 높이 */
}

::-webkit-scrollbar-thumb {
  background-image: url("scrollbar.png");
  /* background-position: center; 
  background-size: contain; */
}

::-webkit-scrollbar-track {
  background: rgba(2, 39, 253, 0.5); /*스크롤바 뒷 배경 색상*/
}
body {
  overflow-x: hidden; /* 가로 스크롤을 숨김 */
  /* overflow-y: auto; 세로 스크롤만 허용 */
}
728x90