Nation JavaScript Library v2

VerticalScrollbar

function
VerticalScrollbar()

Option name Type Description
contentSelector domelement_or_querystring_or_jqueryobject

Selector or element containing content to be scrolled by the scrollbar
scrollbarSelector domelement_or_querystring_or_jqueryobject

Selector or element containing the scrollbar HTML. Expected to contain elements with classes 'js-track'/'track', and 'js-handle'/'handle'
options object

An object containing the custom settings for this scrollbar
enableMouseLock {boolean=false} Prevents the main page from being scrolled when the user uses the mousewheel while hovered over the scrollable content
inertiaEnabled {boolean=true} Causes scroll intertia on mobile devices after a vertical swipe
inertiaMultiplier {number=0.8} The strength of the inertia effect. A higher number results in a longer ease out that covers more distance

Dependencies:

NATION.Utils
NATION.EventDispatcher

About:

A JavaScript-powered scrollbar, used to scroll content vertically

Example

CONTENT_SCROLLED

property
VerticalScrollbar.prototype.CONTENT_SCROLLED

Event that fires each time the content position is changed

ENABLED

property
VerticalScrollbar.prototype.ENABLED

Event that fires when the scrollbar becomes active (due to long content)

DISABLED

property
VerticalScrollbar.prototype.DISABLED

Event that fires when the scrollbar is disabled (content isn't long enough)

enable

method
VerticalScrollbar.prototype.enable()

Resume listening for user interaction (handle drags, content scrolls, etc)

disable

method
VerticalScrollbar.prototype.disable()

Stop listening to any form of user interaction (handle drags, content scrolls, etc)

reset

method
VerticalScrollbar.prototype.reset()

Set the scroll position back to the top of the content

resize

method
VerticalScrollbar.prototype.resize()

Option name Type Description
maintainPosition Boolean

Set to true if the handle and content should maintain their relative current scroll position, percentage-wise

Repositions the scrollbar after the content height was changed
If the position relative to the content's current scroll should be maintained, maintainPosition should be true. Otherwise this will reset the scrollbar, and associated content, back to the top
This method also disables the scrollbar automatically, if the content height has become smaller than the scrollbar height

setPosition

method
VerticalScrollbar.prototype.setPosition()

Option name Type Description
percentage Number

A percentage representing how far down the content should be scrolled, from 0 to 1

Scroll the content to a passed position, as a percentage between 0 and 1

getPosition

method
VerticalScrollbar.prototype.getPosition() ->number

Returns the current scroll position, as a percentage between 0 and 1