Pixel Scrolling

SpreadJS will enable precision scrolling by pixel when scrollByPixel is true.

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    spread.options.scrollByPixel = true;

In addition, you can also define the number of pixels that are scrolled at a time when scrollByPixel is true. The final scrolling pixels are the result of scrolling delta multiplied by scrollPixel.

For example, the scrolling delta is 3, and the scrollPixel is 5, the final scrolling pixels are 15.

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    spread.options.scrollByPixel = true;
    spread.options.scrollPixel = 5;

The Worksheet class provides a scroll method to scroll the sheet by specified pixels.

The scroll method has 2 number parameters, vPixels and hPixels.

The vPixels represents the pixels to scroll in vertical direction. The hPixels represents the pixels to scroll in horizontal direction.

When vPixels is positive, worksheet will scroll down; when vPixels is negative, worksheet will scroll up; when vPixels is 0, worksheet won't scroll in vertical direction.

When hPixels is positive, worksheet will scroll right; when hPixels is negative, worksheet will scroll left; when hPixels is 0, worksheet won't scroll in horizontal direction.

When the Workbook’s scrollByPixel option is set to true, the worksheet will scroll to the new top row/left column index and the new top row/left column offset.

When Workbook's option scrollByPixel is false, worksheet will scroll to new top row/left column index, and new top row/left column offset will be always 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);

in TopRowChanged / LeftColumnChanged event, you can use offset attributes to get info of current position in cell.

///* 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

if you want to use the oldOffset/newOffset attributes, you can do like this:

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