스크롤바 둥글게 스마트폰처럼 설정하기

PC나 데스크탑에서 각진 사각형 스크롤 바가 나오는데 이걸 스마트폰 스크롤 바 디자인처럼 둥글게 변경하고 싶으면 아래 코드를 CSS에 넣어주면 된다.

/* Scrollbar Design */

::-webkit-scrollbar {
  width: 10px;  /* 세로축 스크롤 바 길이 */
  height: 20px;  /* 가로축 스크롤 바 길이 */
}
::-webkit-scrollbar-button:start {
  background-color: white; /* Top, Left 방향의 이동버튼 */
}
::-webkit-scrollbar-button:end {
  background-color: white; /* Bottom, Right 방향의 이동버튼 */
}
::-webkit-scrollbar-track-piece {
  background-color: white; /*스크롤 바 배경 색상*/
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: gray; /*스크롤 바 색상*/
}

 

2022. 3. 13.