jScrollPane is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled.
Examples
There are full examples of many different use-cases for jScrollPane all available from the jScrollPane homepage.
Version
jScrollPane is currently at version 1.2.3.
You can keep up to date with all changes to jScrollPane using the project feeds from googlecode.
Download
jScrollPane has it’s own googlecode site - this is where the latest sourcecode and releases can be downloaded from. The latest release will always be a featured download and the cutting edge code will be found in the svn trunk:
http://code.google.com/p/jscrollpane/source/checkout
Previous releases will be tagged in the Subversion tags directory:
http://jscrollpane.googlecode.com/svn/tags/
Bug reporting and feature requests
Please submit any bug reports or feature requests through the jScrollPane issues list on googlecode. Please remember to include all information necessary to replicate the bug, including effected browser and operating system and a URL to a test page displaying the problem. Please also first search through the issues list to see if there are any existing related issues.
Donate
jScrollPane is completely free and open source. However, if you find jScrollPane useful and you would like to make a donation towards my beer fund then please use the paypal button below to donate any amount. Thanks!
51 Comments, Comment or Ping
Hi,
we tested your plugin jscroll example downloading evrything expcept mint/?js, the plugin works in firefox and explorer, but in safari doesn’t work. When we link mint/?js, all works well. But we quickly read the code of mint/?js and I suppose it’s a development code. Can you help me.
Thx
Federico
December 13th, 2007
Hi,
The mint script is just the stats tracking package I use on my site. It shouldn’t effect how the scroll pane scripts work… Do you have a URL to your page which isn’t working in Safari and maybe I can help you debug?
Cheers,
Kelvin :)
December 13th, 2007
Hi, this is a very nice script but I need some functions to use it in real app.
1. Horizontal scrolling
2. Resizing function(because of the window that can be resized)
Do you plan to extend your plugin ?
Thanks
December 30th, 2007
Hi, great script but I need Panetrack on the left side, can You help me :)
regards
Pawel
January 7th, 2008
Hi Pawel,
You can move the panetrack to the left hand side using some CSS.
Another user posted this example on a bug report – maybe it helps you?
http://plugins.jquery.com/node/449#comment-73
Cheers,
Kelvin :)
January 12th, 2008
Hi, is it possible to use it for a horizontal-scroll?
Best regards
February 7th, 2008
Hi,
I would like to refresh the scrollpanes when the text is resized. Seems that firefox (mac/win) has trouble with this. Or am i missing something?
regards,
Nick
March 7th, 2008
Hi Nick,
Did you see this example?
http://kelvinluck.com/assets/jquery/jScrollPane/textSizeChange.html
Cheers,
Kelvin :)
March 7th, 2008
Hi Kelvin,
Yes i have seen that. This does the text but i can’t make the box expand using ems. I was wondering if there could be a call the scrollpane initialising script in the header of the html each time somebody resizes the text.
– Nick
March 10th, 2008
Hey Kelvin,
Nice plug-in. Im using scrollpane for thumbnails in an image gallery. On clicking a thumbnail the page is refreshed and the image is displayed in a view pane. If the thumbnail clicked is outside the intial window pane( ie had to scroll to get to it) then the scrollbar looses position after refresh. Any ideas
March 11th, 2008
Is there a way to make the scroll pane elastic?. The box resizes properly if the window is reloaded but stays the same otherwise even when using ems.
March 18th, 2008
Hi Nick,
Sorry for the slow reply, I’ve been really busy. Unfortunately I don’t think the scrollpane will work elastically as it currently is. There is a support ticket with a similar request here too:
http://plugins.jquery.com/node/1790
I’ll try and look into it when I get a spare minute. In the meantime you could try listening to the window resize event and reinitialising the scrollpane then (like in my full body scroll example)
Hope that helps,
Kelvin :)
March 18th, 2008
Hi Doug,
I can’t really comment without seeing your page but it would probably be better not to refresh the whole page when a thumbnail is clicked but instead to use JS to update the rest of the page.
Otherwise you could use the scrollTo method on document ready to scroll to the relevant link (like in this example),
Hope that helps,
Kelvin :)
March 18th, 2008
I was wondering if you had a scroll bar that would work on the horizontal axis instead?
Thanks
Mike
March 21st, 2008
Hi Mike,
I’m afraid jScrollPane currently only creates vertical scrollbars. If I ever find some spare time I will extend it to work horizontally but I don’t think that will happen too soon…
Cheers,
Kelvin :)
March 21st, 2008
Is this a free downloadable open source plugin to use or licenced?
Thanks
Amarnath :)
March 25th, 2008
Yes – the plugin is licensed under the same MIT and GPL licenses as jQuery itself,
Cheers,
Kelvin :)
March 28th, 2008
Hi Kelvin! First of all, really nice script!
Did you have any complains about it used on a modal thickbox window? Because i could make it work on a single page but once i try it on thickbox it doesn’t shows any of the div’s contents and a JS “invalid argument” error is shown on the opener window.
I would appreciate any help on this. No rush at all!
Also, great pics!
Greets from Argentina, Diego.
May 20th, 2008
Hi Kelvin,
Is there any customization that can make Arrow Keys (up and dowm) from keyboard can control the JScrollPane?
June 3rd, 2008
Hi guys,
@Diego – I think it should work in a thickbox window as long as you initialise the scrollpane after opening the window… Do you have a test URL I could look at to maybe see what’s going wrong?
@wilson – Sorry, there is currently no keyboard control for the scroll pane. You could set up your own keyboard listeners which would use the scrollBy functionality of the plugin to control the jScrollPane,
Hope that helps,
Kelvin :)
June 4th, 2008
hi.. i’m using your plugin and it works greatly on my image gallery. tks!!!
June 27th, 2008
Any idea why the script rarely although sometimes works on http://www.lionsbreath.ca/teachertraining/ but seems to always work on http://www.lionsbreath.ca/classdescriptions/ If you have an answer I would be happy to compensate you. Thanks.
July 12th, 2008
Hi Kelvin,
How can I determine the Scroll Bar produced or not?
July 23rd, 2008
hello.
i’m trying to use the scrollbar for a horizontally scrolling div, rather than a vertical one. is this possible?
thanks a lot.
August 11th, 2008
Hey Kevin. This is a great plugin. I am running into one problem with it. If I update my jquery file to anything more recent then 1.2.3 the plugin locks up in Safari and crashes every time. Is this something that you are currently aware of? If so is there a fix for it. Thanks!
August 11th, 2008
Awesome script Kelvin! Thanks for sharing.
To all the people asking for a horizontal version, someone made a mod: http://plugins.jquery.com/project/jscrollhorizontalpane
August 20th, 2008
Hi Kelvin,
great plugin. Just having trouble if I open the scrollpane 2 time via ajax request. The second time the height of class jScrollPaneContainer is always 0px hence no content is shown. Which function do I have to use to reload the scrollpane correctly on the close button of my dialog window? thx Florian
August 21st, 2008
Hi Kelvin,
We found a Problem when using jScrollPane on a div thats not displayed.
< div style="display:none">
< div class="scroll-pane">
some stuff
< /div>
< /div>
then an error occured in ie6 and ie8 (we did not test ie7). The developer toolbar in ie8 told us about an Illegal Argument (I hope thats the right translation) in line 115: ”$this.css(cssToApply);”.
This comes because of an error in jquery.pack.js in line 1, character 13287: “d[f]=c;return d[f]”
Illegal Argument
>>d
{...}
>>f
“width”
>>c
”-12px”
In FF everythink works.
We’re using jquery 1.2.6 and jScrollPane.js 4765 2008-02-17 21:14:59Z
Thanks for the great plugin!
October 30th, 2008
Hi! I have sort of a weird problem. Somehow the scroll works perfectly on firefox, but it just dissappears on ie. Any idea why that might happen? Thnx btw, it’s come in handy =D
October 31st, 2008
HI everyone - sorry for the very slow replies!
@John Allan - I'm not sure I'm afraid... It seems to work fine on both links for me now... Are you still having problems?
@Wilson - something like the following should work (where selector selects the element you tried to apply jScrollPane to):
if ($('SELECTOR').parent().is('.jScrollPaneContainer'))@Tudor - Sorry, not currently. I believe someone else modified jScrollPane to add that functionality though (in fact, Mark S links to it above).
@Chad Davis - It's not something I'm aware of... Are you still having issues with the latest jQuery?
@Florian - Maybe the problem is that you are not waiting until the AJAX content has loaded before you apply jScrollPane? If you can provide a test URL then I may be able to help more...
@Tobi - That sounds like a genuine issue - I've raised a ticket for it: http://plugins.jquery.com/node/4691 . In the meantime did you try showing the parent div before applying the scroll pane and then hiding it directly afterwards?
@Paco - AFAIK the scrollpane should work fine in IE. Can you provide a URL where it is failing? Which version of IE are you using?
I'm going to try and go through the bug reports on the plugins site now and do some fixes - let me know if there are any more problems...
November 5th, 2008
Hey Kelvin,
Awesome script! Just wondering if it's possible for the drag bar to always remain bottom positioned every time the text area gets updated with new content (i.e. with append), instead of it always re-initializing at the top position? For example, with instant messaging chat boxes, every time a new message is sent, the scrollbar adjusts to the newly inserted content but the scrollbar remains fixed at the bottom position. Can this be replicated? Thanks and hope to hear from you soon!
Cheers
November 8th, 2008
Hey Kelvin,
I'm having some trouble using jscrollpane in conjunction with a thumbnail image links. My scrollable area contains a serious of thumbnail pictures and when you click on a thumbnail, the larger version of the image appears on main section of the page. The scrolling functions are working great but when I click one of my thumbnails, it forces that image to scroll to the top of the scrollable area and then I have to click it again to get the large picture to show up.
Basically, the large image event won't happen unless the corresponding thumbnail is at the top of the scrollable area. When I disable jscrollpane in my script and just use the browser default scroll bar, everything works just fine.
Do you have any idea what could be causing this?
November 12th, 2008
Hi Kelvin,
great script, I've been looking for something like this for ages!
Only I'm having the same problem as someone else mentioned earlier, I can get it to work anywhere I want to (latest stable versions of IE, Firefox and Opera) except Safari. It shows the text as one large window without scrolling...
Can you help? Thanks in advance!
November 16th, 2008
And this you'll always see... look at it for hours and right when you ask for support, it works afterwards :$.
I think (not sure) it was because I switched the order: I had put my styles files below my script files in the header, instead of the other way around.
Sorry for bothering, but still wanted to say: wonderful script!!
November 16th, 2008
Scrollbar is working just fine with text and image but not when I put a film coming from Youtube (<param name="movie" value="http://www.youtube.com/v/...)
The movie is showing above the scroll area.
Do you have any idea where this problem is coming from.
Francois
November 20th, 2008
Hey Kelvin,
Great plugin, flexible, very nice!
I found that some clients like a single shaped drag handle nicer. Changed 'dragH' to a set size (line 289) and it works like a charm.
Maybe a good one for the options? {dragFixedHeight:10}
thanks,
Maarten
December 4th, 2008
Hey Maarten,
I think you should be able to do this by passing both a dragMinHeight and a dragMaxHeight in when you instantiate the jScrollPane. Then you won't need to edit the plugin sourcecode. Did you try this? I guess I could provide a convenience parameter which would set both of these for you...
Cheers,
Kelvin :)
December 4th, 2008
Somewhat ridiculous question. I don't have the page uploaded as yet Kevin but I cannot seem to make 2 matching scrolls function on a page.?
Got one ... it's exactly what I need. It's your Basic example pane 2.
Using exactly the same tags on a second scoll on the page I get nothing but standard vertical and horizontal scrollbars?
December 8th, 2008
Hey Joe,
I answered you on the issue you created on googlecode:
http://code.google.com/p/jscrollpane/issues/detail?id=26
Cheers,
Kelvin :)
December 8th, 2008
Hi Kelvin, I just wanted to say thanks. I've successfully included your plugin in the application I was creating, and your code is so cool that it was quite easy to modify. For example, I had UL items as folding menus and I needed to assign the id of the UL menu to the wrapping divs.
I've tested your plugin in IE6, 7, O9.62, S3.11, Ch, FF3,2 and it works sweet everytime. Thanks again Kelvin.
December 9th, 2008
Hey Kelvin,
thanks for your great Plugin...it works fantastically...
but there is a problem I cannnot solve myself...is it possible that the panedrag automatically jumps to the bottom after loading content via Ajax??
December 11th, 2008
Hey Elliot,
Sweet - glad you liked it! Thanks for letting me know :)
December 12th, 2008
Hi Daniel,
I've just uploaded an example of doing just this:
jScrollPane - always scroll to bottom
If you want to use this approach then please grab the latest jScrollPane (revision 37 +) from my site or the googlecode svn as I just fixed a bug related to this,
Cheers,
Kelvin :)
December 12th, 2008
Hello, Kelvin!
Thank you for this great plugin! I have a question, similar to Maarten Wolzak's question about customized ScrollPaneDrag height. Setting min and max height are working fine, ScrollPaneDrag displays correct (for example, I use 16x16 picture), but when I press mouse at ScrollPaneTrack, it works like real height of ScrollPaneDrag is not 16 pixels. Could you, please, add examples of using different heights of ScrollPaneDrag.
Thank you very much!
December 14th, 2008
Hi Semenov,
Can you provide a URL showing the problem? And can you please input the problem as an issue on googlecode:
http://code.google.com/p/jscrollpane/issues/list
What happens when you click on the track? It is meant to move the drag towards the place where you clicked - is this not happening?
Thanks,
Kelvin :)
December 16th, 2008
Hi Kelvin,
This is a really great plugin; thanks so much for making it! We use it a lot in the Smithsonian's Freer-Sackler Asian Ceramics Gallery website.
Through the course of making the website I've fixed several bugs in the scrollpane code. The most annoying one is that anchor links don't work properly if they are inside the scrollpane; you have to use some crazy anchors with classes and the links have to be special JavaScript calls. Not the ideal for people without Javascript or staying standards-compliant.
I have written a function that fixes this and allows you to use normal anchor links anywhere on the page, like the scrollpane wasn't even there. You can find the code on my blog: http://phreakhead.livejournal.com/74276.html.
I hope you think this is a good addition and perhaps you will include in future releases. Thanks!
December 19th, 2008
Hi Tyler,
Glad you like the plugin.
Thanks for the information on your website. The functionality you are talking about has been included in jScrollPane for quite a while now (see the release announcement for 1.2). Please grab the latest version of jScrollPane and tell me if it works on your website without your extra code...
Also, I noticed that on the ceramics website some of the links are to an IP address (rather than domain name) and that that IP address isn't longer available to me,
Thanks,
Kelvin :)
p.s. people without javascript will always see normal browser implemented scrollbars as jScrollPane is made to degrade gracefully.
December 19th, 2008
I'm trying to use multiple instances of the jScrollPane on the same page. The page has an ASP Tab Container with two tabs, both using the scroll pane. and a seperate panel with the scroll pane next to the tab container. Everything works great in FF, Safari, and Chrome. In IE however, only the first scroll bar works. The others fail when trying to retrieve the InnerHeight() and InnerWidth() both of which return 0. This causes the CSS that is passed to the elements to have negative heights and widths which causes a failure and none of the content in the panes is displayed. If another call is made, say a modal pop up the scroll bars work. Any insight or do you need more info?
December 23rd, 2008
Hi Brian,
It would be great if you could file an issue about this on the googlecode issues list:
http://code.google.com/p/jscrollpane/issues/list
If you could supply a URL that would help to diagnose the problem but it sounds like it might be related to the issue with scrollpane not working when initialised on invisible div... A test URL would help me to figure out exactly what's going on though,
Cheers,
Kelvin :)
December 23rd, 2008
@Anne-Lies
Thank you! When I place the stylesheet before the script my trouble with strange width after reload dispersed!
January 2nd, 2009
Reply to “jScrollPane - custom cross-browser scrollbars”