SpreadJS will enable precision scrolling by pixel when scrollByPixel is 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.
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.
in TopRowChanged / LeftColumnChanged event, you can use offset attributes to get info of current position in cell.
if you want to use the oldOffset/newOffset attributes, you can do like this:
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
/* Binding settings */
var scrollByPixel = _getElementById("scrollByPixel");
scrollByPixel.addEventListener("change", function () {
spread.options.scrollByPixel = scrollByPixel.checked;
});
var scrollPixel = _getElementById("scrollPixel");
_getElementById("setScrollPixel").addEventListener("click", function () {
spread.options.scrollPixel = parseInt(scrollPixel.value);
});
_getElementById("scroll").addEventListener("click", function () {
var vPixels = parseFloat(_getElementById("vPixels").value);
var hPixels = parseFloat(_getElementById("hPixels").value);
var sheet = spread.getActiveSheet();
sheet.scroll(vPixels, hPixels);
});
var intervalID;
_getElementById("autoScroll").addEventListener("click", function () {
if (intervalID) {
window.clearInterval(intervalID);
intervalID = null;
}
var vPixels = parseFloat(_getElementById("vPixels").value);
var hPixels = parseFloat(_getElementById("hPixels").value);
var interval = parseInt(_getElementById("interval").value);
intervalID = setInterval(function () {
var sheet = spread.getActiveSheet();
sheet.scroll(vPixels, hPixels);
}, interval);
});
_getElementById("stopScroll").addEventListener("click", function () {
if (intervalID) {
window.clearInterval(intervalID);
intervalID = null;
}
});
spread.suspendPaint();
spread.options.scrollByPixel = true;
var sheet = spread.getActiveSheet();
//change cells dimensions
sheet.setColumnWidth(0, 150);
sheet.setColumnWidth(4, 100);
sheet.setColumnWidth(5, 430);
sheet.setRowHeight(0, 50);
sheet.setRowHeight(3, 10);
sheet.setRowHeight(10, 100);
sheet.setRowHeight(12, 475);
sheet.resumePaint();
spread.resumePaint();
}
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<p>Scroll the spreadsheet to view the pixel scrolling feature. </p>
<p>You can also change the number of pixels scrolled below by entering the number and press Set Scroll Pixel.</p>
<p>To disable this feature, uncheck the option.</p>
<input type="checkbox" id="scrollByPixel" checked="checked" />
<label for="scrollByPixel">Scroll By Pixel</label>
</div>
<div class="option-row">
<input type="number" id="scrollPixel" value="5" />
<input type="button" id="setScrollPixel" value="Set Scroll Pixel" />
</div>
<div class="option-row">
<p>You can also scroll the sheet by specified pixels.</p>
<label>
<input type="number" id="vPixels" value="1">
vPixels
</label>
<label>
<input type="number" id="hPixels" value="0">
hPixels
</label>
<input type="button" id="scroll" value="Scroll">
</div>
<div class="option-row">
<p>If you invoke the scroll method in a timer, the sheet can be scrolled automatically.</p>
<label>
<input type="number" id="interval" value="20">
interval(ms)
</label>
<input type="button" id="autoScroll" value="Automatically Scroll">
<input type="button" id="stopScroll" value="Stop Scroll">
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 3px;
margin: 3px;
}
input[type=number] {
width: 40px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
