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.

<p>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.</p> <p>The SpreadJS scrollbars are enabled by default but can disabled by setting the <strong>showVerticalScrollbar</strong> and <strong>showHorizontalScrollbar</strong> methods of the Workbook object to false:</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// get a reference to the workbook</span> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-comment">// disable the vertical scrollbar</span> spread.options.showVerticalScrollbar = <span class="hljs-literal">false</span>; <span class="hljs-comment">// disable the horizontal scrollbar</span> spread.options.showHorizontalScrollbar = <span class="hljs-literal">false</span>; </code></pre> <p>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 <strong>showScrollTip</strong> option:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-comment">// enable scroll tips for both scrollbars</span> spread.options.showScrollTip = GC.Spread.Sheets.ShowScrollTip.both; <span class="hljs-comment">// Other possible values:</span> <span class="hljs-comment">// GC.Spread.Sheets.ShowScrollTip.horizontal;</span> <span class="hljs-comment">// GC.Spread.Sheets.ShowScrollTip.vertical;</span> <span class="hljs-comment">// GC.Spread.Sheets.ShowScrollTip.none;</span> </code></pre> <h2 id="controlling-the-scroll-box-container">Controlling the scroll box container</h2> <p>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 <strong>scrollbarMaxAlign</strong> option which when enabled restricts scrolling to the area of the active sheet that has rows or columns.</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// prevent scrolling past the last row or column</span> spread.options.scrollbarMaxAlign = <span class="hljs-literal">true</span>; </code></pre> <p>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 <strong>scrollbarShowMax</strong> which calculates the size of the container based on the entire number of rows or columns of the active sheet. The second is <strong>scrollIgnoreHidden</strong> which ignores hidden rows or columns in the calculation of the size of the box container.</p> <p>The following items are treated as hidden:</p> <ul> <li>Zero height rows.</li> <li>Zero height columns.</li> <li>Hidden rows or columns.</li> <li>Rows or columns included in a collapsed group.</li> <li>Filtered out rows in a filtered table or list.</li> </ul> <pre><code class="hljs js language-js"> <span class="hljs-comment">// control the height or width of the scroll box container:</span> <span class="hljs-comment">// the area between the scrollbar's box and arrows</span> spread.options.scrollbarShowMax = <span class="hljs-literal">true</span>; <span class="hljs-comment">// Ignore hidden rows when calculating the size of the scroll</span> <span class="hljs-comment">// box container</span> spread.options.scrollIgnoreHidden = <span class="hljs-literal">true</span>; </code></pre>
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; }