> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/interface/scrollbar.md).

# scrollbar()

스크롤바 (Scroll Bar) 믹스인

## 용도 <a href="#use" id="use"></a>

스크롤바 모양을 꾸미고자 할 때 사용합니다.

{% hint style="warning" %}
[::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) 속성은 Blink 및 WebKit 기반 브라우저 (예: Chrome, Edge, Opera, Safari, iOS의 모든 브라우저 등)에서만 사용할 수 있습니다.
{% endhint %}

## 사용법 <a href="#usage" id="usage"></a>

`scrollbar()` 믹스인을 호출합니다. 썸(Thumb) 크기, 색상, 둥글기, 바(Bar) 색상 등을 설정할 수 있습니다.

> scrollbar($size:**number**, $thumb-color:**color**, $thumb-radius:**number**, $bar-color:**color**)

```ruby
.scrollbar {
  @include scrollbar(rem(20), #20bebe);
}
```

| 매개변수(parameter) | 유형(type) | 필수(required) |                                   기본 값(default)                                   |
| :-------------: | :------: | :----------: | :-------------------------------------------------------------------------------: |
|      $size      |  number  |              |                                       `10px`                                      |
|   $thumb-color  |   color  |              |                                 `get-color(black)`                                |
|  $thumb-radius  |  number  |              |                                       `3px`                                       |
|    $bar-color   |   color  |              | 썸 색상 명도 대비를 분석해 계산된 색 ([로직](/scss-mixins/mixins/interface/scrollbar.md#logic) 참고) |

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

```css
.scrollbar {
  scrollbar-face-color: #20bebe;
  scrollbar-track-color: #0f5656;
}
.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #20bebe #0f5656;
}
.scrollbar::-webkit-scrollbar {
  width: 1.25rem;
  height: 1.25rem;
}
.scrollbar::-webkit-scrollbar-thumb {
  background: #20bebe;
  border-radius: 3px;
}
.scrollbar::-webkit-scrollbar-track {
  background: #0f5656;
}
```

## 로직 <a href="#logic" id="logic"></a>

`scrollbar()` 믹스인은 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@use 'sass:color';

@mixin scrollbar(
  $size: 10px,
  $thumb-color: get-color(black),
  $thumb-radius: 3px,
  $bar-color:
    mix(
      $thumb-color,
      if(
        color.blackness($thumb-color) >= 50%,
        get-color(white),
        get-color(black)
      ),
      45%
    )
) {
  // IE
  & {
    scrollbar-face-color: $thumb-color;
    scrollbar-track-color: $bar-color;
  }

  // Firefox
  & {
    scrollbar-width: thin;
    scrollbar-color: $thumb-color $bar-color;
  }

  // Webkit, Blick
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $thumb-radius;
  }

  &::-webkit-scrollbar-track {
    background: $bar-color;
  }
}
```

1. Sass 컬러(Color) 모듈 사용
2. 전달 받은 인자 값이 없을 경우, 기본 설정 된 매개변수 값 사용
3. 전달 받은 인자 값이 있을 경우 썸 크기, 색상, 둥글기, 바 색상 등 값을 설정하여 코드 출력

{% hint style="success" %}
**$bar-color 값을 자동으로 계산하는데 사용되는 로직**

Sass의 mix() 함수를 사용해 썸 컬러에 다음 과정을 통해 계산 된 색과 혼합합니다. blackness() 함수를 사용해서 썸 컬러의 값이 검정색에 얼마나 가까운 지 계산(검정색에 가까울 수록 100%에 근접) 합니다.&#x20;

계산된 값이 50% 보다 크거나 같다면? 썸 색상이 어두운 색이므로 색 구성표에 등록된 하얀색을 사용합니다. 반대로 50% 보다 작다면? 썸 색상이 밝은 색상이므로 색 구성표에 등록된 검정색을 사용합니다.

```javascript
mix(
  $thumb-color,
  if(
    color.blackness($thumb-color) >= 50%,
    get-color(white),
    get-color(black)
  ),
  45%
)
```

{% endhint %}

## 참고 <a href="#reference" id="reference"></a>

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

* [@use](https://sass-lang.com/documentation/at-rules/use)
* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [if()](https://sass-lang.com/documentation/modules#if)
* [mix()](https://sass-lang.com/documentation/modules/color#mix)
* [color.blackness()](https://sass-lang.com/documentation/modules/color#blackness)

믹스인에 사용된 직접 제작한 모듈은 다음과 같습니다.

* [get-color()](/scss-mixins/utilities/colors/get-color.md)