# 스크롤

## Content

간트 차트의 시간 눈금을 뷰포트 영역과 함께 픽셀 단위, 틱(tick) 단위, 지정된 단위 또는 지정된 날짜로 스크롤할 수 있습니다.
`timescale` 클래스의 `scroll` 메서드를 사용하여 수평 또는 수직 방향의 스크롤을 활성화할 수 있습니다. 이 메서드와 함께 스크롤 동작에 영향을 주는 다음 속성들을 사용할 수 있습니다.

## 픽셀 단위로 시간 눈금 스크롤하기

`scroll(pixels)` 메서드를 사용하여 시간 눈금을 픽셀 단위로 스크롤할 수 있습니다.
시간 눈금은 가장 가까운 틱으로 스크롤됩니다. 양수 픽셀은 앞으로, 음수 픽셀은 뒤로 스크롤합니다.

```javascript
// 픽셀 단위로 시간 눈금 스크롤
// 앞으로 스크롤
var pixels = 50;
ganttSheet.project.timescale.scroll(pixels);
// 뒤로 스크롤
var pixels = -50;ganttSheet.project.timescale.scroll(pixels);
```

## 한 틱(tick) 단위로 시간 눈금 스크롤하기

`scrollOneTick()` 메서드를 사용하여 시간 눈금을 한 틱 단위로 스크롤할 수 있습니다.
값을 `true`로 설정하면 앞으로, `false` 또는 생략 시 뒤로 스크롤됩니다.

```javascript
// 한 틱 단위로 시간 눈금 스크롤
// 앞으로 스크롤
ganttSheet.project.timescale.scrollOneTick(true);
// 뒤로 스크롤
ganttSheet.project.timescale.scrollOneTick();
```

## 지정된 단위로 시간 눈금 스크롤하기

`scrollBy(count, unit)` 메서드를 사용하여 지정된 단위 수만큼 시간 눈금을 스크롤할 수 있습니다.
스크롤 단위는 `GC.Spread.Sheets.GanttSheet.TimescaleUnit` 타입이며, 다음 값을 포함합니다: `years`, `halfYears`, `quarters`, `months`, `thirdsOfMonth`, `weeks`, `days`, `hours`, `minutes`
시간 눈금은 가장 가까운 틱으로 스크롤되며, 양수는 앞으로, 음수는 뒤로 스크롤합니다.

```javascript
// 지정된 단위로 시간 눈금 스크롤
// 3일 앞으로 스크롤
var unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.days;
var count = 3;
ganttSheet.project.timescale.scrollBy(count, unit);
// 5개월 뒤로 스크롤
var unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.months;
var count = -5;
ganttSheet.project.timescale.scrollBy(count, unit);
```

## 지정된 날짜로 시간 눈금 스크롤하기

`scrollTo(date)` 메서드를 사용하여 지정된 날짜로 시간 눈금을 스크롤할 수 있습니다.
시간 눈금은 가장 가까운 틱으로 스크롤됩니다.

```javascript
// 지정된 날짜로 시간 눈금 스크롤
var date = new Date("2023/8/20");
ganttSheet.project.timescale.scrollTo(date);
```

뷰포트 내에서 대상 날짜가 스크롤될 위치를 백분율로 제어할 수 있습니다. 기본 백분율은 `0`이며, 이는 대상 날짜가 뷰포트의 왼쪽에 위치하도록 스크롤합니다.
아래 코드 샘플은 대상 날짜가 뷰포트의 중앙에 위치하도록 스크롤하는 방법을 보여줍니다.

```javascript
// 뷰포트 중앙에 날짜가 오도록 스크롤
var date = new Date("2023/8/20");
var percentOfViewport = 0.1;
ganttSheet.project.timescale.scrollTo(date, percentOfViewport);
```

아래 GIF는 간트 차트의 다양한 시간 눈금 스크롤 동작을 보여줍니다.

![TimescaleSrolling](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/TimescaleSrolling.4d841a.gif?width=1386)