기본적으로 Excel 및 SpreadJS는 모두 행 및 열별로 스크롤합니다. 그러나 픽셀 스크롤 기능이 활성화된 경우 사용자는 사용자 정의 기본 설정에 따라 워크시트 내에서 픽셀별로 쉽게 스크롤할 수 있습니다. 사용자는 가로 방향(픽셀별로 열 스크롤) 및/또는 세로 방향(픽셀별로 행 스크롤)으로 픽셀별로 스크롤할 수 있습니다.
scrollByPixel이 true인 경우 SpreadJS에서 픽셀 단위로 정밀하게 스크롤할 수 있습니다.
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
spread.options.scrollByPixel = true;
또한 scrollByPixel이 true인 경우 한 번에 스크롤되는 픽셀 수를 정의할 수 있습니다. 최종 스크롤 픽셀은 스크롤 델타에 scrollPixel을 곱한 결과입니다. 예를 들어 스크롤 델타는 3이고 scrollPixel이 5이면 최종 스크롤 픽셀은 15입니다.
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
spread.options.scrollByPixel = true;
spread.options.scrollPixel = 5;
워크시트 클래스는 지정된 픽셀 단위로 시트를 스크롤할 수 있는 scroll 메소드를 제공합니다.
scroll 메소드에는 vPixels와 hPixels의 두 가지 숫자 매개변수가 있습니다.
vPixels은 수직 방향으로 스크롤할 픽셀을 나타냅니다. hPixels는 수평 방향으로 스크롤할 픽셀을 나타냅니다.
vPixels가 양수이면 워크시트가 아래로 스크롤되고, vPixels가 음수이면 워크시트가 위로 스크롤되며, vPixels가 0이면 워크시트가 수직 방향으로 스크롤되지 않습니다.
hPixels가 양수이면 워크시트가 오른쪽으로 스크롤되고, hPixels가 음수이면 워크시트가 왼쪽으로 스크롤되며, hPixels가 0이면 워크시트가 수평 방향으로 스크롤되지 않습니다.
워크북의 scrollByPixel 옵션이 true이면 워크시트가 새로운 상단 행/좌측 열 인덱스와 새 상단 행/좌측 열 오프셋으로 스크롤됩니다.
워크북의 scrollByPixel 옵션이 false이면 워크시트가 새로운 상단 행/왼쪽 열 인덱스로 스크롤되고 새 상단 행/왼쪽 열 오프셋은 항상 0입니다.
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
spread.options.scrollByPixel = true;
var sheet = spread.getActiveSheet();
//This example scrolls down the sheet 10 pixels and scrolls right the sheet 5 pixels.
sheet.scroll(10, 5);
에서 오프셋 속성을 사용하여 셀의 현재 위치에 대한 정보를 가져올 수 있습니다.
///* LeftColumnChanged
/**
* Occurs when the left column changes.
* @name GC.Spread.Sheets.Worksheet#LeftColumnChanged
* @event
* @param {GC.Spread.Sheets.Worksheet} sheet The sheet that triggered the event.
* @param {string} sheetName The sheet's name.
* @param {number} oldLeftCol The old left column index.
* @param {number} newLeftCol The new left column index.
* @param {number} oldOffset The old left column offset. // ===> new attribute
* @param {number} newOffset The new left column offset. // ===> new attribute
///* TopRowChanged
/**
* Occurs when the top row changes.
* @name GC.Spread.Sheets.Worksheet#TopRowChanged
* @event
* @param {GC.Spread.Sheets.Worksheet} sheet The sheet that triggered the event.
* @param {string} sheetName The sheet's name.
* @param {number} oldTopRow The old top row index.
* @param {number} newTopRow The new top row index.
* @param {number} oldOffset The old top row offset. // ===> new attribute
* @param {number} newOffset The new top row offset. // ===> new attribute
를 사용하면 다음과 같이 할 수 있습니다:
var wb1 = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"));
var wb2 = new GC.Spread.Sheets.Workbook(document.getElementById("ss2"));
wb1.options.scrollByPixel = true;
wb2.options.scrollByPixel = true;
wb1.bind(GC.Spread.Sheets.Events.TopRowChanged, (e, info) => {
wb2.getActiveSheet().showRow(info.newTopRow);
wb2.getActiveSheet().scroll(info.newOffset - info.oldOffset, 0);
});
wb1.bind(GC.Spread.Sheets.Events.LeftColumnChanged, (e, info) => {
wb2.getActiveSheet().showColumn(info.newLeftCol);
wb2.getActiveSheet().scroll(0, info.newOffset - info.oldOffset);
});
// scroll the wb1