概述
本 Demo 展示了 SpreadJS 的像素滚动功能，包括如何启用像素滚动、设置滚动像素数、手动滚动指定像素以及通过定时器实现自动滚动效果。Demo 提供了交互式界面，用户可以实时调整滚动参数并观察滚动效果。
实现思路
初始化 Workbook 并启用像素滚动模式（scrollByPixel = true）
绑定复选框控制像素滚动的启用/禁用状态
绑定输入框和按钮，允许用户自定义 scrollPixel 值（每次滚动的像素数）
绑定滚动按钮，调用 scroll 方法执行一次性像素滚动
实现自动滚动功能，通过定时器持续调用 scroll 方法
设置示例单元格的行高和列宽，以便更清晰地观察滚动效果
代码解析
启用像素滚动
这段代码通过监听复选框的变化来控制像素滚动功能。scrollByPixel 是 Workbook 的选项属性，设置为 true 时启用像素级滚动，设置为 false 时恢复默认的按行/列滚动。
设置滚动像素数
scrollPixel 属性定义了当用户使用滚动条箭头时每次滚动的像素数。最终的滚动距离是滚动增量乘以 scrollPixel 的结果。例如，滚动增量为 3，scrollPixel 为 5，则最终滚动 15 个像素。
手动滚动指定像素
scroll 方法接受两个参数：vPixels（垂直像素）和 hPixels（水平像素）。正值表示向下或向右滚动，负值表示向上或向左滚动。当 scrollByPixel 为 true 时，工作表会滚动到对应行列的偏移位置。
自动滚动实现
通过 setInterval 定时器持续调用 scroll 方法，实现自动滚动效果。用户可以设置滚动间隔时间（毫秒），点击"停止滚动"按钮清除定时器停止滚动。
运行效果
页面加载时，像素滚动功能默认启用，复选框处于选中状态
使用滚动条箭头滚动工作表时，会按照设定的像素数平滑滚动
点击"设置滚动像素"按钮可以修改每次滚动的像素数
输入垂直和水平像素数，点击"滚动"按钮，工作表会一次性滚动指定像素
点击"自动滚动"按钮，工作表会按照设定的间隔时间持续滚动，点击"停止滚动"按钮停止
API 参考
scrollByPixel 属性
启用或禁用像素级滚动。默认为 false，设置为 true 时启用像素滚动。
scrollPixel 属性
定义每次滚动的像素数。仅在 scrollByPixel 为 true 时生效。最终滚动距离 = 滚动增量 × scrollPixel。
scroll 方法
vPixels：垂直方向滚动的像素数，正值向下，负值向上
hPixels：水平方向滚动的像素数，正值向右，负值向左
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 name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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>滚动电子表格以查看像素滚动功能。</p>
<p>您还可以在下方输入滚动的像素数，然后点击“设置滚动像素”按钮来更改滚动像素数。</p>
<p>若要禁用此功能，请取消选中该选项。</p>
<input type="checkbox" id="scrollByPixel" checked="checked" />
<label for="scrollByPixel">按像素滚动</label>
</div>
<div class="option-row">
<input type="number" id="scrollPixel" value="5" />
<input type="button" id="setScrollPixel" value="设置滚动像素" />
</div>
<div class="option-row">
<p>您还可以按指定的像素数滚动工作表。</p>
<label>
<input type="number" id="vPixels" value="1">
垂直像素数
</label>
<label>
<input type="number" id="hPixels" value="0">
水平像素数
</label>
<input type="button" id="scroll" value="滚动">
</div>
<div class="option-row">
<p>如果在计时器中调用滚动方法，工作表可以自动滚动。</p>
<label>
<input type="number" id="interval" value="20">
间隔(毫秒)
</label>
<input type="button" id="autoScroll" value="自动滚动">
<input type="button" id="stopScroll" value="停止滚动">
</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;
}
