SpreadJS allows horizontal and vertical scrollbars. In addition, vertically scrolling by mouse wheel, horizontally scrolling by mouse wheel while press the Shift key.
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:
// get a reference to the workbook
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
// disable the vertical scrollbar
spread.options.showVerticalScrollbar = false;
// disable the horizontal scrollbar
spread.options.showHorizontalScrollbar = 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:
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
// enable scroll tips for both scrollbars
spread.options.showScrollTip = GC.Spread.Sheets.ShowScrollTip.both;
// Other possible values:
// GC.Spread.Sheets.ShowScrollTip.horizontal;
// GC.Spread.Sheets.ShowScrollTip.vertical;
// GC.Spread.Sheets.ShowScrollTip.none;
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.
// prevent scrolling past the last row or column
spread.options.scrollbarMaxAlign = true;
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:
// control the height or width of the scroll box container:
// the area between the scrollbar's box and arrows
spread.options.scrollbarShowMax = true;
// Ignore hidden rows when calculating the size of the scroll
// box container
spread.options.scrollIgnoreHidden = true;
Submit and view feedback for