Overview
Scrollbar UI is a component that fully replaces the browser's scrollbar with a complete custom one. Currently SK Scrollbar looks very similar to Mac OSX Lion native scroller, its basically the same. That is why by default we don't apply it on Chrome/Safari under Mac OSX Lion (Firefox has some issues with the native scroller so we apply the custom scroller there). This UI may have many options, including scroller track, [+] and [-] buttons, and can be easily styled. The constructor can be a good base for more advanced UIs and controls, e.g. components in which we have interfaces like scrollbar, slider, etc.
Include Resource Files
Please note that the file dependencies may already exist in the environment and you may not need to include these.
/Shared/UIComponents/Internal/Scrollbar
css/scrollbar.css
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/Scrollbar/css/scrollbar.css">
Scripts/scrollbar.js
<script type="text/javascript" src="/Shared/UIComponents/Internal/Scrollbar/Scripts/scrollbar.js"></script>
Default Options
Name | Description | Type | Default Value |
|---|---|---|---|
horizontal | Should have a horizontal scrollbar, otherwise use browser/OS native. | Boolean | false |
vertical | Should have a vertical scrollbar, otherwise use browser/OS native. | Boolean | true |
autohide | If true, hides scrollers when the mouse leaves the scroll container. | Boolean | false |
dynamic | If true, observes container for changes in dimensions & updates the scrollers. | Boolean | true |
buttons | If true, the UI will create top/left and bottom/right buttons. | Boolean | false |
track | If true, the UI will create scroll-tracks. | Boolean | false |
mousewheel | Whether to observe mouse wheel event or not. | Boolean | true |
replace_osx_native | Whether to force apply on Lion OSX (Chrome, Safari). | Boolean | false |
Methods
Name | Description | Parameters | Returns |
|---|---|---|---|
updateScrollers | Re-calculates & updates the dimensions (width for horizontal, height for vertical) of all scrollers. | - | - |
getScroller | Returns scroller DOM element. | String ("hor" or "ver") | DOMElement |
reinitScrollbars | Re-calculates width/height of the scrollbars & re-positions the scrollers. | - | - |
Examples
Creating a simple Scrollbar UI: