Custom scroll

The template includes a custom scroll plugin, which provides touch-devices-like scrollbars and is compatible with touch devices and mousewheels. It does not create wrapper divs like other similar plugins, thus it may be used for instance on an ul.

How to use it

The easiest way is simply to add the class scrollable to any element:

<div class="scrollable">

	<!-- Your content here -->

</div>

If you need to control it via javascript, just call:

$(selector).customScroll({ /* options */ });

Scroll to reveal

When using custom scroll, there is a useful method for bringing an element into the visible area:

$(selector).scrollToReveal();

The whole scrolled area will move to show the selected element. Note that this works fine also in nested scrolled elements.

Methods

$(selector).customScroll(options)

Enable custom scroll bar

$(selector).removeCustomScroll()

Remove custom scroll

$(selector).hasCustomScroll()

Tell whether the element has custom scrolling

Return

@return boolean true if scrolling, else false

$(selector).refreshCustomScroll()

Refreshes custom scroll bar position

$(selector).moveCustomScroll(deltaX, deltaY, doNotAnimate)

Refreshes custom scroll bar position

Parameters

@param int deltaX the move on the X axis
@param int deltaY the move on the Y axis
@param boolean doNotAnimate true to skip animation

$(selector).scrollToReveal()

Scroll all custom-scroll parent if required to reveal the element

Options reference

horizontal

Horizontal scrolling
Type: boolean
Default: false

vertical

Vertical scrolling
Type: boolean
Default: true

verticalOnLeft

Show vertical sidebar on left
Type: boolean
Default: false

usePadding

Whether to use or ignore element's padding in the scrollbar position
Type: boolean
Default: false

padding

Padding around scrollbar (can be a single value if regular, or an object with 'top', 'right', 'bottom' and 'left' - unset values will be set to 0)
Type: int|object
Default: 6

width

Scrollbar's width in pixels
Type: int
Default: 8

cornerWidth

Size of empty space in the corner of both scrollbars when they are enabled
Type: int
Default: 10

minScrollerSize

Scroller minimum size, in pixels (will automatically be resized for scrollbars smaller than this value)
Type: int
Default: 30

minWheelScroll

Minimun wheel scroll increment (prevent mouses with custom driver to scroll too slowly)
Type: float
Default: 0.25

continuousWheelScroll

Use true to let the parent element scroll when the target can not scroll no more (on mouse wheel)
Type: boolean
Default: true

continuousWheelScroll

Use true to let the parent element scroll when the target can not scroll no more (on touch move)
Type: boolean
Default: true

speed

Speed: move for each mouse scroll
Type: int
Default: 48

animate

Animate scroll movement
Type: boolean
Default: false

showOnHover

Show scrollbars only on hover
Type: boolean
Default: true

autoHide

Hide useless scrollbars
Type: boolean
Default: true