https://rawb.codeplex.com/SourceControl/latest#Rawb/Rawb/js/rawb.ui.js

Scrollbars

Rawb scrollbars are not standard web browser scrollbars. As such, they can be styled as you please.

Rawb also provides a native scrollbar (see below) suitable for controlling some quantity rather than just moving some part of the display.

rawb.VScrollBar(range, start, count, hardStop)

Templates: RawbVScrollBarTemplate

Shorthand for rawb.ScrollBar(range, start, count, hardStop, false).

Example HTML:
<!-- ko template: { name: 'RawbVScrollBarTemplate', data: vsb } -->
<!-- /ko -->

Example JavaScript:
var range = ko.observable(100);
var start = ko.observable(0);
var count = ko.observable(30);
var hardStop = true;
var vsb = new rawb.VScrollBar(range, start, count, hardStop);
ko.applyBindings({vsb: vsb});

rawb.HScrollBar(range, start, count, hardStop)

Templates: RawbHScrollBarTemplate

Shorthand for rawb.ScrollBar(range, start, count, hardStop, true).

Example HTML:
<!-- ko template: { name: 'RawbHScrollBarTemplate', data: hsb } -->
<!-- /ko -->

Example JavaScript:
var range = ko.observable(100);
var start = ko.observable(0);
var count = ko.observable(30);
var hardStop = true;
var hsb = new rawb.HScrollBar(range, start, count, hardStop);
ko.applyBindings({hsb: hsb});

rawb.ScrollBar(range, start, count, hardStop, isHorizontal)

Templates: RawbVScrollBarTemplate, RawbHScrollBarTemplate

A styleable scrollbar managing an integer observable spanning a given range of
values. The value can be changed by the user dragging the scrollbar
thumb with the mouse. The displayed scrollbar position can be changed by the
program by changing the start, count, and range observables.

See rawb.VScrollBar and rawb.HScrollBar.

Parameters

range: number
Required; may be observable; exposed as an observable.
The scrollbar ranges over 0..(range - 1).

start: number
Required; may be observable; exposed as an observable.
The point in the range where the scrollbar thumb starts.

count: number
Required; may be observable; exposed as an observable.
The number of points over which the scrollbar thumb extends.
The display of the scrollbar thumb has a lower-limit of 10% of the range,
to prevent the thumb from apparently disappearing when the range is very large.

hardStop: boolean
Optional (default false); may not be observable; not exposed.
If true, constrains start + count <= range.
If false, constrains start < range.

isHorizontal: boolean
Optional (default false); may not be observable; not exposed.
If true, scrollbar thumb responds to horizontal mouse dragging.
If false, scrollbar thumb responds to vertical mouse dragging.

Methods

dispose(): function ()
Disposes Knockout subscriptions created by the DropDown.
Use this when the DropDown goes out of scope if you are concerned about memory leaks.

rawb.NativeVScrollBar(height, contentHeight, scrollTop, top, left, width)

Templates: RawbNativeVScrollBarTemplate

A browser-native vertical scrollbar which can be used to control another observable (scrollTop)
either from the program or via user interaction with the scrollbar control. No 'content' is
shown, just the scrollbar itself.

Example HTML:
<!-- ko template: { name: 'RawbNativeVScrollBarTemplate', data: vsb, afterRender: vsb.afterRender } -->
<!-- /ko -->

Example JavaScript:
var height = ko.observable(100);
var contentHeight = ko.observable(200);
var scrollTop = ko.observable(30);
var vsb = new rawb.NativeVScrollBar(height, contentHeight, scrollTop);
ko.applyBindings({vsb: vsb});

Parameters

height: number
Optional (default 200); may be observable; exposed as an observable.

The height of the scrollbar control in pixels.

contentHeight: number
Optional (default 400); may be observable; exposed as an observable.

The height of the 'contents' of the scrollbar in pixels.

scrollTop: number
Optional (default 0); may be observable; exposed as an observable.

The distance from the top of the 'contents' to the 'displayed' region in pixels.

top: number
Optional (default 0); may be observable; exposed as an observable.

The top offset in pixels for the absolute position of the scrollbar.

left: number
Optional (default 0); may be observable; exposed as an observable.

The left offset in pixels for the absolute position of the scrollbar.

width: number
Optional (default 17); may be observable; exposed as an observable.

The width of the scrollbar control.

Methods

*afterRender(elements): function (elements)
This function must be passed to the afterRender option of the Knockout template binding when
binding an instance of NativeVScrollBar to the RawbNativeVScrollBarTemplate. Otherwise the binding
will not work correctly.

*dispose(): function ()
This function clears up all subscriptions etc. created by the scrollbar.
Use this when the NativeVScrollBar instance goes out of scope, if you are concerned about potential memory leaks.