[SCSS] 스크롤 믹스인 만들기

스크롤 믹스인을 만들어두자

스크롤 안보이게 처리하기

@mixin scroll-hidden {
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
  }
}

 

스크롤 커스터마이징 하기

스크롤 커스터마이징

 

@mixin scroll($size, $scroll-color, $bg-color) {
  overflow:auto;

  &::-webkit-scrollbar {
      width:  $size;
      height: $size;
  }
  &::-webkit-scrollbar-thumb {
      background: $scroll-color;
  }
  &::-webkit-scrollbar-track {
      background: $bg-color;
  }
}

 

사용법

.test-box{
  width:400px;
  height:400px;
  margin:30px;
  border:1px solid black;
  @include scroll(4px, black, #e0e0e0);
}

스크롤바 사이즈, 바 컬러, 백그라운드 컬러를 넘기면된다.