# 사용자 지정 스크롤바

## Content

SpreadJS는 두 가지 유형의 스크롤바를 제공합니다:

* **클래식 스크롤바 (Classic Scrollbar)** – 기본 스킨 형태
* **사용자 지정 스크롤바 (Customizable Scrollbar)** – 모바일 스타일 형태

기본 스크롤바는 **클래식 스크롤바**이며, [스크롤바 옵션](/spreadjs/docs/features/workbook/scrollbar/scrollbars)에서 참조할 수 있습니다.
하지만 `ScrollbarAppearance` 열거형을 `mobile`로 설정하면 기본 스크롤 막대를 사용자 지정 가능한 스크롤 막대로 변경할 수 있습니다. 스크롤 막대 사용자 지정에는 색, 테두리, 캡, 마우스 오버, 자동 페이드 등의 다양한 옵션이 포함됩니다. 이러한 mobile 스타일의 사용자 지정 기능을 사용하면 웹 사이트의 테마나 웹 페이지의 특정 스타일에 맞게 스크롤 막대를 구성할 수 있습니다.
이러한 설정은 웹사이트 테마나 페이지 스타일에 맞춰 스크롤바를 일관되게 적용하는 데 유용합니다.

모바일 스크롤바는 아래와 같이 4가지 상태로 표시합니다.

* **Hide (숨김) :** 마우스가 스크롤바에서 벗어나면 몇 초 후 스크롤바가 자동으로 숨겨집니다.
* **Normal (일반) :** 마우스가 벗어나도 몇 초간 일반 상태로 유지됩니다. 또한 마우스 휠 사용, 키보드로 셀 이동, 셀 선택 변경, 터치 슬라이딩 등으로도 나타납니다.
* **Hover (호버) :** 마우스가 스크롤바 위에 있을 때 **스크롤바의 너비와 색상**이 변경됩니다.
* **Active (활성) :** 스크롤바를 클릭하고 드래그할 때 활성 상태가 되며, **너비, 색상, 테두리**가 일반 상태와 다르게 표시됩니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/scrollbar_gif.gif?width=600)

SpreadJS는 마우스가 **스프레드시트 호스트 영역에 진입**할 경우, 특별한 **spread-hovering** 상태를 적용합니다.

* **spread-hovering** : 스크롤바는 **Normal** 상태와 **Hide** 상태를 적용합니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/special_scrollbar_state.gif?width=600)

아래는 **스킨(Skin)** 스타일과 **모바일(Mobile)** 스타일 스크롤바의 차이를 설명한 내용입니다:

| **스크롤바 동작** | **스킨 스타일** | **모바일 스타일** |
| ------- | ------ | ------- |
| 스크롤 가능 영역 및 표시 여부 | 탭 스트립(Tab strip)의 영향을 받음 | 탭 스트립(Tab strip)의 영향을 받지 않음 |
| 화살표 및 영역(span) | 표시됨 | 표시되지 않 |

> **참고:** 모바일 스타일에서는 **고정된 행 또는 열(frozen rows/columns)** 은 무시되고 스크롤됩니다.

## 코드 사용 예

다음 예제는 코드로 **스크롤바 스타일을 모바일(mobile)** 로 설정하는 방법을 보여줍니다:

```auto
// 모바일에 scrollbarAppearance 설정
 spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;
```

다음과 같이 **클래스 이름**과 **스타일**을 사용하여 스크롤바 스타일을 사용자 정의할 수도 있습니다:

```css
 .gc-scroll-mobile-container {
       border-radius: 8px;
   }

   .gc-scroll-mobile-thumb {
       border-radius: 8px;
       border: none;
       background-color: skyblue;
       background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
   }

   .gc-scroll-mobile-state-active .gc-scroll-mobile-thumb {
       border: none;
       background-color: skyblue;
       background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
   }
```

위 코드의 출력 결과는 아래와 같이 스크롤바가 표시됩니다:

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/style_customized_scrollbar.gif)

스크롤바의 외형을 사용자 정의하려면, 아래에 명시된 클래스 이름에 해당하는 스타일을 적용해 주세요.

```auto
/* {} 안에 권장 스타일이 명시되어 있습니다. */

/* 스크롤바 컨테이너 (Normal 상태) */
.gc-scroll-mobile-container { border-radius, opacity, padding }          /* 스크롤바에 대한 공통 스타일 */
.gc-scroll-mobile-container-vertical { width }                           /* 세로 스크롤바 스타일 */
.gc-scroll-mobile-container-horizontal { height }                        /* 가로 스크롤바 스타일 */

/* 스크롤바 Thumb (Normal  상태) */
.gc-scroll-mobile-thumb { background, border, border-radius, opacity }   /* 스크롤바 Thumb스타일 */

/* 스크롤바 트랙 (Normal 상태) */
.gc-scroll-mobile-track { background, border, border-radius, opacity }  /* 스크롤바 트랙 스타일 */

/* 콤보 클래스 이름, 스크롤바 컨테이너에 추가 적용 */
.gc-scroll-mobile-spread-hovering                                       /* 마우스가 스프레드 호스트에 진입했을 때 스크롤바 요소에 적용되는 스타일 */
.gc-scroll-mobile-state-hide                                            /* 스크롤바가 숨겨질 때의 스타일 */
.gc-scroll-mobile-state-hover                                           /* 마우스 오버 시 스크롤바 스타일 */
.gc-scroll-mobile-state-active                                          /* 스크롤바가 활성(드래그 중)일 때의 스타일 */
```

다음과 같이 SpreadJS 디자이너에서도 **모바일 스크롤바**를 설정할 수 있습니다:
![image-20260305.de50b3.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260305.de50b3-20260528.b8c9e8.png?width=600)