« back

jScroll HorizontalPane

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.

Examples:

Usage

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

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.

$(function() {
     $('.scroll-pane').jScrollHorizontalPane();
});

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.

Downloads

You can download the zip file with the complete package from the following link. Download

Bug Reporting

Email info@threeformed.com for the time being if u encounter any bugs and hopefully we can take care of the issue!
Otherwise, enjoy!

At: 8:14 am
On: 14 // 07 // 2008
By: Anton
In: jQuery, javascript
TO:jQuery Plugin

[21] Comments

21 Comments

This is the greatest way to set your custom scroll bars
Thank you a lot for such an awesome plug-in…

The only issue I’ve came across is that it won’t display in Mozilla 2 :
http://www.curlybracketcreative.com/valissa-test/music.html

Since this is my first site, and since I haven’t learned .js, I’d really appreciate any clue on this issue. Thanks in advance! Sonja

At: 3:39 pm
On: 11 // 11 // 2009
By: Soski

Is it possible for this to also enable to use the vertical scroll pane with this? Because as it is now, you can only OR use horizontal scrollling OR vertical scrolling. I would like to use both coincidingly in one page.

thanx for the effort and all!

Greetz.

At: 1:25 pm
On: 3 // 12 // 2009
By: Rudie

I’m trying to move “jScrollHorizontalPane.js” and “jScrollHorizontalPane.min.js” for example into a different folder. How do I move them without breaking the scripts and functions?

Cheers.

At: 6:30 pm
On: 5 // 02 // 2010
By: Flame

Actually I’ve worked it out. Thank you

At: 8:35 pm
On: 5 // 02 // 2010
By: Flame

is there a function of jscrollHorizontal pane that will allow me to programmatically remove it from a page?

jScrollPane has the remove function (http://www.kelvinluck.com/assets/jquery/jScrollPane/remove.html)

Does jScrollHorizontalPane have anything like that?

At: 2:16 am
On: 3 // 03 // 2010
By: Robin

I’m testing out the script as it’s exactly what I need, but it doesn’t appear to work in Safari (I’m using v4.0.5). It works in FireFox though (v3.6).

Any suggestions?

At: 3:36 pm
On: 12 // 03 // 2010
By: Matt

Please ignore my comment above – it’s working in Safari now. An older version of my test page must have loaded from the cache…

At: 3:50 pm
On: 12 // 03 // 2010
By: Matt

Minor doc note: arrowSize is actually the arrow’s width, not height. (The later is defined in the CSS.)

At: 8:51 pm
On: 14 // 03 // 2010
By: manuel

Following on from my comments above, I’ve come across another strange ‘problem’.

The first time the page loads the scrollbars are restyled, but if I then reload/refresh the page the scrollbars aren’t styled. If I browse away to another page and then come back the scrollbars are restyled again.

Can you help?…

At: 8:53 pm
On: 19 // 03 // 2010
By: Matt

[...] on such a device doesn’t really make a difference. And some plug-ins (like Scrollable and jScrollHorizontalPane) simplify the action by enabling users to navigate horizontally by using the standard vertical [...]