[CSS/SCSS] 스크롤바 디자인 변경하기

css

브라우저 기본으로 적용되어 있는 스크롤바 디자인을 아래와 같이 변경할 수 있다.

SCSS

div {
  width: 100px;
  height: 100px;
  overflow-y: scroll;
}

.basic-scroll {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: #ffffff;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3.5px;
    background-color: #ced4da;

    &:hover {
      background-color: #adb5bd;
    }
  }
  &::-webkit-scrollbar-track {
    background: #ffffff;
  }
}

실행 결과



👋@Jess2
👩🏻‍💻Frontend Developer

GitHubFacebookLinkedIn