像素滚动

默认情况下,Excel和SpreadJS都按行和列滚动。启用像素滚动功能后,用户可以根据其设置轻松地在工作表中按像素滚动。 用户可以在水平方向(按像素滚动列)或垂直方向(按像素滚动行)上按像素滚动。

当scrollByPixel为true时,SpreadJS将启用按像素的精确滚动。 此外,您还可以定义当scrollByPixel为true时一次滚动的像素数。 最终的滚动像素是滚动增量乘以scrollPixel的结果。 例如,滚动增量为3,scrollPixel为5,最终滚动像素为15。 Worksheet类型提供了scroll方法,用来滚动指定的像素位置。 这个scroll方法包含两个参数,vPixels 和 hPixels. vPixels:表示竖直方向滚动的像素距离。 hPixels:表示水平方向滚动的像素距离。 当vPixels参数为正值时,表单会向下滚动,反之则向上滚动。 当hPixels参数为正值时,表单将向右滚动,反之则向左滚动。 当Workbook的scrollByPixel为true时,表单将滚动到对应行列的偏移位置,反之,当scrollByPixel为false时,那么将直接滚动到所在行列的准确位置,而不会产生任何偏移。
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/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/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>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; }