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:
var options = {
   autohide   : true,
   buttons    : true,
   horizontal : true
};
// my-scrollbar can be a DOMElement or an ID
new SK.UI.Scrollbar( 'my-scrollbar', options );