SpreadJSはデフォルトでは列の幅や行の高さの単位でのスクロールとなります。ピクセルスクロール機能が有効になっている場合、カスタム設定に従ってワークシート内でピクセルごとにスクロールできます。 ユーザーは、水平方向(列のスクロール)または垂直方向(行のスクロール)およびその両方でピクセルごとにスクロールできます。
SpreadJSでは、scrollByPixelがtrueの場合、ピクセル単位でのスクロールが可能になります。
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;
Worksheetクラスは、指定されたピクセルでシートをスクロールするscrollメソッドを提供します。
scrollメソッドには、vPixelsとhPixelsの2つの数値パラメーターがあります。
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();
//この例では、シートを10ピクセル下にスクロールし、シートを5ピクセル右にスクロールします。
sheet.scroll(10, 5);
TopRowChangedとLeftColumnChangedイベントでは、offsetプロパティを使用して、スクロールした位置をピクセル単位で取得することができます。
///* LeftColumnChanged
/**
* 左側の列が変更されたときに発生します。
* @name GC.Spread.Sheets.Worksheet#LeftColumnChanged
* @event
* @param {GC.Spread.Sheets.Worksheet} sheet イベントが発生したシート。
* @param {string} sheetName シートの名前。
* @param {number} oldLeftCol 変更前の古い左側の列のインデックス。
* @param {number} newLeftCol 変更後の新しい左側の列のインデックス。
* @param {number} oldOffset 変更前の古い左側の列のスクロール位置。
* @param {number} newOffset 変更後の新しい左側の列のスクロール位置。
///* TopRowChanged
/**
* 先頭の行が変更されたときに発生します。
* @name GC.Spread.Sheets.Worksheet#TopRowChanged
* @event
* @param {GC.Spread.Sheets.Worksheet} sheet イベントが発生したシート。
* @param {string} sheetName シートの名前。
* @param {number} oldTopRow 変更前の一番上の行のインデックス。
* @param {number} newTopRow 変更後の一番上の行のインデックス。
* @param {number} oldOffset 変更前の一番上の行のスクロール位置。
* @param {number} newOffset 変更後の一番上の行のスクロール位置。
oldOffset/newOffsetプロパティを使用する場合は、以下のようにscrollByPixelを設定します。
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);
});