Scrollbars Overview

This demo illustrates how to work with SpreadJS horizontal and vertical scrollbars. Try changing the different properties below to see how the JavaScript code affects the different aspects of the workbook scrollbars.

Users can use the vertical scrollbar's arrow buttons to scroll up or down one row at a time and one column at a time for the horizontal scrollbar. They can scroll faster by holding and dragging the scrollbar thumb. The fastest way to scroll is to click in the scroll box container which is the space between the scrollbar's thumb and arrow buttons which scrolls the sheet by page instead of rows. The SpreadJS scrollbars are enabled by default but can disabled by setting the showVerticalScrollbar and showHorizontalScrollbar methods of the Workbook object to false: The scrollbars can show a tooltip when the user drags a scrollbar's box. If enabled for the vertical scrollbar, the scroll tip shows the top row in view when dragging the vertical scrollbar's box. Similarly, the scroll tip shows the leftmost column in view when dragging the horizontal scrollbar box. The scroll tips are enabled using the workbook's showScrollTip option: Controlling the scroll box container Normally, the user can scroll past the last row or column of the active sheet which brings the blank area of the sheet into view. One useful workbook option to set is the scrollbarMaxAlign option which when enabled restricts scrolling to the area of the active sheet that has rows or columns. In addition to its use for fast scrolling, the size of the scroll thumb container is a visual indicator to the user on how much he needs to scroll to reach to top or bottom of the sheet. The size of this container can be controlled with two options: The first option is scrollbarShowMax which calculates the size of the container based on the entire number of rows or columns of the active sheet. The second is scrollIgnoreHidden which ignores hidden rows or columns in the calculation of the size of the box container. The following items are treated as hidden: Zero height rows. Zero height columns. Hidden rows or columns. Rows or columns included in a collapsed group. Filtered out rows in a filtered table or list.
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { /* Binding settings */ _getElementById('showHorizontalScrollbar').addEventListener('change', function() { spread.options.showHorizontalScrollbar = this.checked; }); _getElementById('showVerticalScrollbar').addEventListener('change', function() { spread.options.showVerticalScrollbar = this.checked; }); _getElementById('scrollbarMaxAlign').addEventListener('change', function() { spread.options.scrollbarMaxAlign = this.checked; }); _getElementById('scrollbarShowMax').addEventListener('change', function() { spread.options.scrollbarShowMax = this.checked; }); _getElementById('optShowScrollTip').addEventListener('change', function() { var result = parseInt(this.value); spread.options.showScrollTip = result; }); _getElementById('scrollIgnoreHidden').addEventListener('change', function() { spread.options.scrollIgnoreHidden = this.checked; }); var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sd = dataSource; if (sd.length > 0) { sheet.setDataSource(sd); } sheet.setColumnWidth(0, 160); sheet.setColumnWidth(1, 70); sheet.setColumnWidth(2, 90); sheet.setColumnWidth(3, 110); sheet.setColumnWidth(4, 80); sheet.setColumnWidth(6, 110); sheet.setRowCount(40); sheet.setColumnCount(20); sheet.columnOutlines.group(5, 5); sheet.rowOutlines.group(5, 5); sheet.getRange(-1, 2, -1, 1).visible(false); sheet.setColumnWidth(7, 0); sheet.setRowHeight(8, 0); sheet.getRange(15, -1, 1, -1).visible(false); var hlf = new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(1, 4, 6, 1)); sheet.rowFilter(hlf); var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition( GC.Spread.Sheets.ConditionalFormatting.ConditionType.numberCondition, { compareType: GC.Spread.Sheets.ConditionalFormatting.GeneralComparisonOperators.greaterThan, expected: 2 } ); sheet.rowFilter().addFilterItem(4, condition); sheet.rowFilter().filter(); sheet.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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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"> <label>showScrollTip:</label> <select id="optShowScrollTip" > <option value="0" selected="selected">None</option> <option value="1">Horizontal</option> <option value="2">Vertical</option> <option value="3">Both</option> </select> </div> <hr/> <div class="option-row"> <input type="checkbox" id="showHorizontalScrollbar" checked="checked" /> <label for="showHorizontalScrollbar">Show Horizontal Scrollbar</label> </div> <div class="option-row"> <input type="checkbox" id="showVerticalScrollbar" checked="checked" /> <label for="showVerticalScrollbar">Show Vertical Scrollbar</label> </div> <div class="option-row"> <input type="checkbox" id="scrollbarMaxAlign"/> <label for="scrollbarMaxAlign">Scrollbar Max Align</label> </div> <label >Set this to restrict the scrolling to the max number of rows/columns.</label> <div class="option-row"> <input type="checkbox" id="scrollbarShowMax" checked="checked"/> <label for="scrollbarShowMax">Scrollbar Show Max</label> </div> <label >Set this to have the scrollbar show the max scroll space.</label> <hr/> <div class="option-row"> <input type="checkbox" id="scrollIgnoreHidden"/> <label for="scrollIgnoreHidden">Scroll Ignore Hidden</label> </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: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } hr { border-color: #fff; opacity: .2; margin-top: 20px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }