Scrollbars V2 has been completely refactored, from head to toe to give you the amazing and the fluid experience you expect from natural scrollbars with the customizability of CSS.
Note: Scrollbars V2 has been partially rewritten in Scrollbars V2.1.0. It has intended to be backwards compatible with V2, but this cannot be 100% assured. The API has remained exactly the same for existing features, accept for toggling device support.
Scrollbars V2 is a jQuery plugin that allows you to theme any elements with the simple CSS you already know. It feature filled yet lightweight, the perfect combination to add that little spark to your special creation.
- Fluid Width Element Support
- Keyboard Control Support
- Mousewheel Support
- Persistant Scroll Level (After Refresh)
- Turns off on mobile phones (Can be forced to stay on)
First, you need to include the jquery.scrollbars.css file in your webpage. You must include this before you include the script. Next, you need to include jQuery in your webpage. Including the jQuery Resize and the jQuery Mousewheel plugins is optional, but some of the features will not be available without them.
the next file you need to include is the jquery.scrollbars.js file.
To activate the script, just run the scrollbars method on your jQuery object. Scrollbars V2 detects when it’s needed so, though not recommened or ideal, it’s possible to run it on the * selector.
$("*").scrollbars();
The scrollbars method accepts an asociative array that can and will modify the way Scrollbars V2 behaves.
- xSpace and ySpace
- forceScrollbars
- keyboardControl
- persistantSize
- overlap
- draggerSize
- device-touch, device-blackberry and device-other
- scrollbarAutohide
- mousewheelSupport
xSpace and ySpace control the space allocated to the scrollbar container, for the x and y axis accordingly.
Defaults to “auto”.
Accepts “auto”, or any integer. “auto” has the same effect as setting it to the size of the scrollbar.
Controls the checking the need for scrollbars.
Defaults to false.
Accepts any boolean.
DO NOT set this true when using it on the * selector, it will quite possibly crash your browser on a large webpage.
Toggles support for scrolling using the arrow keys and PageUp/PageDown keys.
Defaults to true
Accepts any boolean.
Toggles support for fluid width elements.
This option/feature requires the jQuery Resize plugin.
Defaults to true
Accepts any boolean.
Toggles the allowance of scrollbars overlapping each other.
Defaults to false
Accepts any boolean.
Controls the height/width of the scrollbar.
Defaults to “auto”
Accepts “auto” or any interger. When “auto” a complex algorithm will be used to define the scrollbars height.
Defines what devices scrollbars is to be used one.
device.touch controls activation on touch handhelds (android and iOS).
device.blackberry controls activation on blackberry devices.
device.other controls activation on every other device.
device.touch and device.blackberry default to false
device.other default to trueAccepts any boolean
No support for touch and blackbery devices has yet been coded into Scrollbars V2. Activate on these devices at your own risk.
This is a nested object. You would pass in something like this
```js
{
device: {
touch: true,
blackberry: false,
other: true
}
}
```
Toggles the autohiding of scrollbars.
Defaults to true
Accepts any boolean.
Toggles support for mousewheel.
This option/feature requires the jQuery Mousewheel plugin.
Defaults to true
Accepts any boolean.
Modify this to speed up / slow down mousewheel.
Defaults to 1
Aceepts any number
You theme your scrollbars by applying css styles to certain elements.
- scrollElement
- axisInUseX and axisInUseY
- rootWrap
- dragCon, dragConX and dragConY
- drag, dragX, dragY
- dragConInner
- contentWrap
Just an internal class added to all elements Scrollbars V2 touches.
A class added to your element when said axis in use.
A wrapper added to your content that gives space for your scrollbars.
A class added to the container for your scrollbar.
A class added to the actual scrollbar.
An inerwrap inside the dragCon
A wrapper added to your content to determine the size of it.