[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

사용자 지정 스크롤바

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

  • 클래식 스크롤바 (Classic Scrollbar) – 기본 스킨 형태

  • 사용자 지정 스크롤바 (Customizable Scrollbar) – 모바일 스타일 형태

기본 스크롤바는 클래식 스크롤바이며, 스크롤바 옵션에서 참조할 수 있습니다.


하지만 ScrollbarAppearance 열거형을 mobile 로 설정하면 클래식 스크롤바를 사용자 지정 스크롤바(모바일 스타일) 로 변경할 수 있습니다.

모바일 스타일 스크롤바는 다음과 같은 다양한 옵션을 통해 사용자 맞춤 설정이 가능합니다:

  • 색상 (color)

  • 테두리 (border)

  • 캡 (cap)

  • 호버 시 스타일 (hover)

  • 자동 페이드 효과 (auto fade) 등

이러한 설정은 웹사이트 테마나 페이지 스타일에 맞춰 스크롤바를 일관되게 적용하는 데 유용합니다.


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

  • Hide (숨김) : 마우스가 스크롤바에서 벗어나면 몇 초 후 스크롤바가 자동으로 숨겨집니다.

  • Normal (일반) : 마우스가 벗어나도 몇 초간 일반 상태로 유지됩니다. 또한 마우스 휠 사용, 키보드로 셀 이동, 셀 선택 변경, 터치 슬라이딩 등으로도 나타납니다.

  • Hover (호버) : 마우스가 스크롤바 위에 있을 때 스크롤바의 너비와 색상이 변경됩니다.

  • Active (활성) : 스크롤바를 클릭하고 드래그할 때 활성 상태가 되며, 너비, 색상, 테두리가 일반 상태와 다르게 표시됩니다.



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

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



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

스크롤바 동작

스킨 스타일

모바일 스타일

스크롤 가능 영역 및 표시 여부

탭 스트립(Tab strip)의 영향을 받음

탭 스트립(Tab strip)의 영향을 받지 않음

화살표 및 영역(span)

표시됨

표시되지 않

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

코드 사용 예

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

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

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

 .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 );
   }

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

Ask ChatGPT




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

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

/* 스크롤바 컨테이너 (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 디자이너에서도 모바일 스크롤바를 설정할 수 있습니다: