스크롤바 디자인 적용

조민혜·2022년 12월 21일
0

[ ! 주의 ] webkit-scrollbar 가 우선적으로 선언이 되어야 함

스크롤바 영역 너비 조정

::-webkit-scrollbar {
    width: 20px;
}

스크롤 영역 안 막대기 -> 스크롤바

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: #555;
}

스크롤바 영역 백그라운드

::-webkit-scrollbar-track {
    background-color: #fff;
}

예제

.listBox {
    width: 470px;
    max-height: 170px;
    min-height: 15px;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background: #a4a4a4;
    }
  }

profile
Currently diving deeper into React.js development.

0개의 댓글