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();
}
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">
<p> Change the different properties below to see how it affects the different aspects of the workbook scrollbars.</p>
<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">Horizontal Scrollbar</label>
</div>
<label >Set this to have the horizontal scrollbar show.</label>
<div class="option-row">
<input type="checkbox" id="showVerticalScrollbar" checked="checked" />
<label for="showVerticalScrollbar">Vertical Scrollbar</label>
</div>
<label >Set this to have the vertical scrollbar show.</label>
<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>
<label >Set this to ignore the hidden rows or columns.</label>
</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;
}
