jScrollHorizontalPane

jScrollHorizontalPane is a plugin based off of Kevin Luck’s jScrollPane which override’s the browsers default horizontal on any block level element with an overflow:auto style. It’s built on top of the jQuery library and uses both the dimensions plugin and the mouse wheel plugin. Provided with the download of the plugin there is a default jScrollHorizontalPane.css which can be used as a basis to edit the stylings on the scroll bar.

This plugin is completely cross browser, and also provides the ability to resize gracefully when the reset option is set to true. Additionally, intervals can be set by adding a class of “scroll-interval” which automatically adds dash’s to the track and provides automatic snap-to on the elements.

Just include the following files in the head of your page:

* jQuery
* the dimensions plugin
* the mouse wheel plugin
* jScrollHorizontalPane.js (or the compressed)
* jScrollHorizontalPane.css

Then you can use any query selector to select the elements you would like to apply jScrollHorizontalPane to and then initialise it. The following code runs when the document is ready and finds any element with a class of “scroll-pane” and then calls jScrollHorizontalPane on them.

jScrollHorizontalPane also takes the following options as parameters to customize the functionality:

scrollbarHeight - The height of the generated scrollbar in pixels
scrollbarMargin - The amount of space to leave on the side of the scrollbar in pixels
wheelSpeed - The speed the pane will scroll in response to the mouse wheel in pixels
showArrows - Whether to display arrows for the user to scroll with
arrowSize - The height of the arrow buttons if showArrows=true
animateTo - Whether to animate when calling scrollTo and scrollBy
dragMinWidth - The minimum width to allow the drag bar to be
dragMaxWidth - The maximum width to allow the drag bar to be
animateInterval - The interval in milliseconds to update an animating scrollHorizontalPane (default 100)
animateStep - The amount to divide the remaining scroll distance by when animating (default 3)
maintainPosition- Whether you want the contents of the scroll pane to maintain it’s position when you re-initialise it - so it doesn’t scroll as you add more content (default true)
resize - Whether or not to have resizing turned on or not.
minimumWidth - The minimum width to allow the jScrollHorizontalPane to be resized to. Only effective when resize is on.
reset - When set to ‘true’ all the global properties will be reset. This is useful for dynamic refreshes on the page.