A problem occured while loading the plugin: krl_flickr_photoset -> : Assigning the return value of new by reference is deprecated on line 18
kelvinluck.com: jScrollPane - Cross browser custom scrollbars
Get Firefox! creative commons

jScrollPane - Cross browser custom scrollbars

I’ve just released my latest plugin for jQuery – my favourite JavaScript library. It is a small (4KB) script which allows you to replace any vertical scrollbars on a div with overflow:auto with your own custom scroll bars. More info, demos and download here and here.

  1. nice work!
    I tried to do this with “prototype” but i’m nowhere compares to this !

    Is it possible to add some “easing” to the way it scroll, to smooth the scrolling movement of the content?

    Alexandre Plennevaux    Jan 27, 17:50    #
  2. another question: is it possible to jump to a specific anchor, inside the scrollbar content?

    so, in other terms, have the scroll starts at a specific position, that is not 0 ?

    Alexandre Plennevaux    Jan 27, 18:15    #
  3. Hi Alexandre,

    It is possible to add easing to the scrolling – basically you would need to modify the positionDrag function to save a reference to where the scroller should be and then use an interval to ease towards this position. Re. the second question, this could also be added to the plugin but isn’t available at the moment…

    I will try and add both these pieces of functionality in when I have a chance…

    Thanks for the feedback!

    Kelvin Luck    Jan 31, 20:39    #
  4. Hi
    This stuff works like a dream, but is it possible to fix the height of the drag area, I have a design that requires a 39px drag handle despite differing text overflows.

    Drew Shapter    Feb 25, 15:04    #
  5. Hi Drew,

    Glad you like it :)

    I was planning to add a minHeight parameter to the drag anyway – I’ll also add a maxHeight parameter too and setting both of these will allow you to fix the height of the drag area… I should get this done at some point this week, look out for a new version on Thursday or Friday,


    Kelvin Luck    Feb 25, 19:05    #
  6. I haven’t found a way to implement a PNG transparency fix that works with these scroll bars, could you add a way to the instructions or something? Would be nice to have partly transparent scroll-bars.

    But it still is a great script, it works perfectly.

    — Tomcenc    Mar 1, 10:09    #
  7. Hi,
    Your script is working great.
    Is it possible to enable your script to manage the horizontal scrolling too ?
    I am about to build a website with customed horizontal scrollers and it would be great if I could use your script.

    Thanks for your work.


    — brett    Mar 8, 09:12    #
  8. @Tomcenc – I had png transparency working fine with the plugin but had some problems on the OSX skin with it because of overlapping elements (as the “track” background graphic repeats). There was no problems with transparency though – any normal png fix should work fine.

    @Brett – I’m afraid that the plugin doesn’t currently support horizontal scrolling and it’s not on my TODO list at the moment (too much other stuff to do first!). Sorry! Feel free to add it in and pass the changes back to me – it shouldn’t be too complex…

    @Alexandre – scrollTo functionality is now added along with easing – check out the plugin page.


    Kelvin Luck    Mar 10, 14:39    #
  9. @Drew – I’ve just implemented dragMinHeight and dragMaxHeight which allow you to control the minimum and maximum size of the drag element,


    Kelvin Luck    Mar 10, 17:06    #
  10. I’ve been giving jscrollpane a try and really like how it works. Only trouble I came across was that on IE the z-index of the scrolling area always appears one top and overlap my dropdown I have at the top of the page.

    The z-index of the dropdowns are over a hundred higher that the scrolling area.Any thoughts what may be going on?

    Thanks and keep up the great coding.

    Sean    Mar 12, 08:08    #
  11. This thing is great!

    However I may have found a bug. I’m using the “winXP” style scrollbars from your example with showArrows=true. I’m updating the innerHTML property of the scroll-pane using some ajax. The problem is that when the content shrinks to where scrollbars are no longer needed, the scrollbar disappears but the UP and DOWN arrow images do not, they just kind float there with no scrollbar, when they should be disappearing completely since there’s not enough content to scroll.

    kevin    Mar 21, 19:26    #
  12. @Sean – sorry, can’t replicate your problem. Check out this new page with a dropdown on it and see if you experience any problems…

    @kevin – thanks for the bug report. I’ve fixed the problem, you can test it on the same new page linked above,


    Kelvin :)

    Kelvin Luck    Mar 22, 02:42    #
  13. I was looking all over the place for something like this, and I am pretty sure there´s no real alternative that´d work on all browsers. Thank you very much for that! BTW, i couldn´t find any licensing notes anywhere…
    Thanks again!

    alex    Mar 23, 17:33    #
  14. Hi Alex,

    Glad you like it :)

    The plugin is dual licensed under the same MIT and GPL licences as jQuery so feel free to use it in any projects (the license notes are at the top of the source files),


    Kelvin :)

    Kelvin Luck    Mar 24, 15:16    #
  15. Hi,

    Thanks for this script, it is fabulous ! I spent my afternoon yesterday looking for a light and easy script which did that. I find nothing good except yours that is exactly what I want.

    I report you a new bug, maybe you know it :
    When using dragMaxHeight in order to have a small drag cursor, the control of the sidebar by clicking upper or lower than the drag badly works : it goes upper when clicking just beside the cursor. It goes upper too quickly when clicking just behind the cursor.

    Thanx a lot !

    Sylvio    Apr 11, 11:38    #
  16. Hi Sylvio,

    Glad you like the script :)

    Thanks for the bug report – I’ll look into this ASAP,


    Kelvin :)

    Kelvin Luck    Apr 11, 16:02    #
  17. Hi i love the script, got it today and works exactly as i want it to.

    I have made 1 modification which is so easy but i think makes it a bit nicer – “cursor:default;”. So the mouse acts like it does over normal scroll bars :)


    Ross    Apr 11, 18:15    #
  18. Hi Ross,

    Glad you like it :)

    To tell the truth I purposefully changed the mouse to be a hand over the scrollbar as that is how I expect the cursor to look when it is hovering over something you can interact with (maybe because this is how it works in flash).

    But I’ve just checked and you are right that normal scrollbars don’t change the cursor into a hand so your change makes sense…

    Thanks for the feedback,

    Kelvin :)

    Kelvin Luck    Apr 11, 18:52    #
  19. Hi Kelvin,

    Thanks for the script, it’s easy to use and beautifully configurable.One question though, my scrollbar doesn’t appear when I load the page the first time. If I click the page link again it will show, but upon reload the default scrollbar will show. Am I doing something wrong ?

    — Bonny    May 24, 17:14    #
  20. Hi Bonny,

    I can’t recreate your issues. Do you have the same problems on my demo pages? What browser are you using? Do you have a link to your page that I can have a look at?


    Kelvin :)

    Kelvin Luck    May 27, 22:43    #
  21. Hey Kelvin, love this plugin BTW. I do have a ‘bug’ or maybe just a feature request ;-p

    The scrollable dimensions do not get updated when you change font size in FF2 at least, haven’t tested on other browsers. Would be nice to measure the contents height on font size change though.

    — James    May 28, 19:09    #
  22. Hi James,

    That’s an interesting observation and very true. It would be ideal if the plugin could detect the text resize event.

    However, it looks like it’s pretty complex to find out when the user has resized their text and I wouldn’t want to bloat the plugin by adding this code which is probably only used in edge cases.

    If it is important to you then you could implement the solution in the list apart article and in the event listener you add you could reinitialise all of your jScrollPanes. In fact, even better would be a jQuery port of the “text size change detect” code. If someone wrote a jquery plugin that did that I would update jScrollPane to use it if and when it had been included…


    Kelvin :)

    Kelvin Luck    May 29, 19:27    #
  23. Hmmm I know that the Ext.js library has an onTextResize event in their EventManager superclass as well… I’ll look there and at the article you’ve linked to and get back to you on my findings.

    — James    May 29, 22:52    #
  24. Hey Kelvin, check out this JQuery plugin….


    It lets you work with the computed size of 1em, which should do the trick?

    — James    May 29, 23:25    #
  25. Hi,

    That looks very interesting… I’ll try and add it into the scrollpane when I next get a second…


    Kelvin :)

    Kelvin Luck    May 29, 23:39    #
  26. checking this out and it looks really great, only one little issue of note. On IE6 the up and down arrows on ”#pane2” are being affected by the issue described and resolved here: http://misterpixel.blogspot.com/2006/09/forensic-analysis-of-ie6.html

    — alek    Jun 25, 20:20    #
  27. Hi Alek,

    Glad you like the script :) Thanks for the headsup re. the IE background image flickers… I’ll add a note to the page about this when I get a chance (crazy busy at the moment :(),


    Kelvin :)

    Kelvin Luck    Jun 25, 20:34    #
  28. hi,
    jScrollPane is definitly the best solution for custom scrollbars i found.

    nevertheless i found (+fixed) a serious bug:

    with scrollarrows turned on, when the difference between scollpane height and its content is too close, the scrollbar gets confused and stops working.

    the thing is, scrollarrow heights are not considered when calculating height of the scrollPane drag.

    the following line:
    var dragH = Math.max(Math.min(percentInView*paneHeight, settings.dragMaxHeight), settings.dragMinHeight);

    has to be changed to:
    var dragH = Math.max(Math.min(percentInView*(paneHeight-settings.arrowSize*2), settings.dragMaxHeight), settings.dragMinHeight);

    in case height is calculated from css, it has to be stored in ‘settings.arrowSize’, and initial height has to be set from ‘undefined’ to ‘0’.

    maybe you will integrate the fix in a future version?

    furhter on, i am using jScrollPane for a commercial project and my agency would be willing to make a donation, but we couldn’t find a link (paypal…)?


    — max    Jun 26, 11:40    #
  29. Hi!
    I realized, when developing an ajax powered data table plugin for jQuery, that the scroll event is lost because of the way jScrollPane transforms an overflow’d div into a repositionable child.

    I created some simple code to emulate an onScroll event with callbacks:

    in the settings parameter, define:

    *onScrollCallBack : function(){ alert(‘bonzai!’); }*

    then, in the positionDrag method, call it last like so:

    and like magic, you have an onScroll event emulated that you can populate with your own juicy closure packed with fun things to do on scroll.

    I hope this helps someone out there.


    Bart Solowiej    Jun 26, 19:58    #
  30. Hi guys,

    @Max – thanks for the work you’ve done on this. I will definitely look at integrating your fix back into the plugin. I’m really busy until next week but I’ll do it then. Re. donations, I did once set up a donations page but I haven’t linked to it yet. If you would like to be the first to use it then feel free, it would be much appreciated :)

    @Bart – nice one for that suggestion too. I think it would be a little cleaner if you triggered a custom event which could be bound to rather than passing a callback function but it seems like what you have there is working fine… When I get a chance to do a little more work on jScrollPane next week I’ll add in the custom scroll event,

    Thanks for the feedback guys,

    Kelvin :)

    Kelvin Luck    Jun 26, 21:51    #
  31. I’m having a hard time getting scrollTo running—any chance of a demo with simpler source? Like how to make the links scroll to an anchor or a paragraph, without that fancy ‘pane3-scroll-targets’ stuff. it just confuses me!


    — trick    Jun 27, 21:57    #
  32. nevermind, got it to kinda work!

    : )

    — trick    Jun 28, 01:19    #
  33. I can’t get the height to work properly on this in any browser. I have a few images inside the div to be scrolled, but the div gets truncated so only half my items appear.

    When I refresh the page the behaviour works properly however. Something to do with onLoad? It seems to be unable to get the proper height of the div on the initial load.

    ij    Jul 10, 02:33    #
  34. Kelvin it is possible to call divs or anchors within the div and have the scrollbar response to these calls? I like the fact that you can point to a P tag and move or animate the scrollbar accordingly, unfortunately you have the Ps as part of the content and unlike you I’m loading several htm documents into a single div and don’t know if I can create links (like a menu) and when clicked move the scrollbar to the specific anchor.

    Please let me know if it is possible.


    — Jay    Jul 10, 21:22    #
  35. Hi,

    @ij – it sounds like you need to wait for the images to load and then reinitialise the scroll pane once the dimensions of the images are known (or embed the images with a width and height).

    @Jay – yes, there should be no problem with that. I’m just packing for a holiday at the moment so can’t put together an example but if you haven’t figured it out by the end of next week (maybe ask on the jQuery mailing list) I might be able to help you,


    Kelvin :)

    Kelvin Luck    Jul 10, 23:23    #
  36. Hi Kelvin,
    Thanks for creating this awesome plug-in. Really enjoy the power of this. On caveat – and you did mention a fix above – when images are not completely loaded, the scroll bar feature cannot calculate the proper height. It works fine if the image sizes are spcified in the image tag or the images have been cached in your browser.

    I am loading some of these images via an ajax call, then on success, calling the scrollPane. Unfortunately, onSuccess does not mean the images have loaded. I have tried a pause in between the onSuccess of the ajax call and applying the scroll bars, but this does not seem to work either.

    Is there a way to wait for the images to load before applying the scrollPane in an ajax type scenario?

    We cannot use Document.Ready, can we?

    Thanks for your help.

    — Julian Dormon    Jul 13, 04:02    #
  37. Thank you Kelvin, I really think that I will need your help on this one, plus you will be left with a really neat example for everyone to enjoy. Should I go ahead and email you the details of what I’m trying to do?


    — Jay    Jul 15, 19:45    #
  38. Hi,

    @Julian – glad you like it :) To deal with your problem you could try adding listeners to the load event on the images (or maybe even on the div that you have jScrollPaned)... If it works on the div and can be generalised then I’ll try and add it into the plugin when I get a chance…

    @Jay – if you send me the details I can try and have a look at it this weekend but I’m busy until then…


    Kelvin :)

    Kelvin Luck    Jul 16, 20:57    #
  39. Great plugin. I do have one issue with it, however; I don’t see why you’re attaching the width styles i.e. .css({‘width’:settings.scrollbarWidth+’px’}).

    That should really be handled by the stylesheet.

    — cwmonkey    Jul 27, 00:44    #
  40. Hi cwmonkey,

    Glad you like the plugin :)

    The reason I pass the scrollbar width into the plugin is because we need to make the div that we scroll narrower to allow for the scrollpane to it’s side. And it seemed to make sense to pass the value in. It might be possible to avoid this and figure out the width as set in the CSS – I’ll have a look into it for a future release. In the meantime I don’t really have a problem with having that number passed into JS although strictly speaking it should be in the CSS,


    Kelvin :)

    Kelvin Luck    Jul 28, 20:08    #
  41. Hi Kelvin,

    Cool plug-in. But (hehe), I am having some problems. Basically inside my jScrollPane container I have other objects that expand and contract as the user clicks on them. After each click like this I call jScrollPane again to have everything re-calculated. But this resets the various parameters of the scroll pane, which can be a bit jarring for the user since things can jump around.

    There is even sort of an example of this on your jScrollPane example page. If you add some stuff to pane4 and then scroll down, when you add more stuff it jumps back to the top.

    Basically what would be good is if jScrollPane could maintain the same location after resizing, so that the contents of the scroll pane do not move (but just the scrollbar resizes.) This is more like how normal scrollable areas behave. In fact I just tested and what would be perfect would be if jScrollPane could behave just like an “overflow: auto” div.

    If you need an example of what I’m talking about, I can probably throw together a simple reduced test case.

    I know your busy and this may be an unusual use of jScrollPane, so if you could offer some suggestions on how this could be fixed I would be willing to see what I can do. I’m a decent programmer, but am not a JavaScript expert, and so far my hacking on jScrollPane has not worked as I would like.

    Of course if you could fix it that would be great :)


    — Ryan Leavengood    Jul 31, 23:01    #
  42. Hi Ryan,

    I agree that that sounds like a useful addition to the scrollpane. I’ve got a little bit of time today so I’ll try and implement this functionality,


    Kelvin :)

    Kelvin Luck    Aug 6, 10:08    #
  43. hi Kelvin,

    just to let you know that we use jscrollpane on this site: http://www.lab-au.com/v1/index.php?section=news

    hope you like our use of it, we certainly love jscrollpane!

    Alexandre Plennevaux    Aug 7, 15:58    #
  44. Hi Alexandre,

    Thanks for letting me know! The scrollpane looks great on that site,


    Kelvin :)

    Kelvin Luck    Aug 8, 09:05    #
  45. Hello Kelvin,
    we have one problem with jscrollpane: when data area is little bigger then scrolling area (few millimeters), default browser scrollbar appears. Could you tell me how to workaround this problem.

    — Oskaras    Aug 13, 11:22    #
  46. Hello Kelvin,

    i have to use your fantastic script for a special element: a huge table. You can see the actual status here: http://temp.capsule.hu/scrollPane/html/__rep_ir.htm

    The header and table body aren’t synchronised yet, but don’t care about it. The problem is (as you can see) that if I use the horizontal scrollbar the vertical (jScrollPane generated) stays there. That’s not a big surprise for me, cuz it’s positioned absolutely with fixed ‘left’ property (calculated from the tableContainer size).

    I’m not a big javascript guru (yet :) ), so the scripts in the html head are not very complicated.

    What is the easiest way, to remove the vertical scrollbar from the horizontal scrolling area and putting it to a div somewhere outside? I tried to hack your script, but it’s not my level yet – I tried to generate the scrollbar to an “yScroll” div outside the horizontal scrolling area. The problem with this method was, that the dimensions are fluid and always recalculated after eg. resizeing the window -> I have to reinitialze the jScrollPane, too… so it’s impossible, to simply remove and regenerate the scroller to that div (especially in ie) – but that was a ‘beginner try’...

    I hope, you can understand the problem (my english is not the best). It would be great to find a solution for this problem!

    Thank You in forth,

    Csongor    Aug 14, 16:37    #
  47. Hi guys,

    @Oskaras – I think that this problem will now be fixed, I am about to release a new version of jScrollPane so re-download shortly and let me know if there is any problems.

    @Csongor – I’ve put together a quick addition (look at line 88+) to your page where when you scroll the table the scrollPane drag also moves. It’s not great because there is a little bit of a lag but it might be good enough.

    I’m not sure if jScrollPane is useful for you in this situation because you won’t be able to make the horizontal scrollbar look good anyway so I don’t know if it is worth changing the vertical one.

    Hope it helps anyway,

    Kelvin :)

    Kelvin Luck    Aug 18, 13:37    #
  48. Thank You Master! It work’s fine. I know, that your script was not designed for these special cases (like huge tables), but I haven’t found any alternatives for repositioning the vertical scrollbar. There are some solutions for fixing horizontal/vertical table headers, but there was always some browser compatibility problem :(.

    I’m using your script now form my new project too – but now, the design will be more important, and there are no huge tables – hurrayyy :)

    Thank you for your help!

    Csongor    Aug 20, 17:20    #
  49. Hi Kelvin,
    Is it possible to “turn off” the track so that only the up and down arrows are visible and right next to each other (down arrow immediately below up arrow, no matter the amount of content), either at the top-right or bottom-right of the container.
    Hope it’s not too far off base for this script, which is excellent in itself by the way!

    Thanks in advance for your help.

    — Frazier    Oct 29, 20:53    #
  50. Hi Frazier,

    I’m afraid that functionality is probably a bit off base for this script. It is fairly simple to do what you want – most of the complexity in my script deals with the track… There may be a plugin which does what you want – I’ve seen talk on the jquery mailing list recently about a scrollTo plugin – maybe this can help you?


    Kelvin :)

    Kelvin Luck    Oct 30, 21:11    #
  51. Hi Kelvin,

    You’ve done a very good job with scrollPane plugin, and I first want to thank you for this.

    Secondly, I would like to tell you about a problem I have.

    The div which has initialized your plugin is empty, and then I’m changing it’s content with AJAX (innerHTML), followed by a reinitialize of the plugin (otherwise it will show up the browser’s default scrollbar).

    I’ve just downloaded the last version, activated maintainPosition, but sometimes, it is scrolling a lot more than is needed (there is a quite empty space after my dynamic content).

    If I keep refreshing my content via AJAX (and reinitialize the plugin), sometimes, it gets to the normal behavior (the empty space bellow is gone).

    Do you know something about this ? I would appreciate.


    — Razvan    Dec 18, 21:04    #
  52. I’m back,

    nerer mind, I see that with the maintainPosition: true in the first init of the pane, and without this option on the reinit, is working ok. And this was only in IE7, FireFox and Safari worked pretty fine.

    Thank you,

    PS: after we’ll finish this project I will come back with an onLine link to it.

    — Razvan    Dec 18, 21:22    #
  53. Hm, pretty nasty.

    Is doing this again, in IE 7.


    — Razvan    Dec 19, 17:48    #
  54. Hi Razvan,

    Are you waiting until the AJAX content has loaded before re-initialising the scrollbars? Does the AJAX content contain images and other stuff like that which might take a little extra time to load?

    If you have a demo page then I’ll try and help you debug the issue,


    Kelvin :)

    Kelvin Luck    Dec 22, 12:30    #
  55. Hi Kelvin,

    yes, the dynamic content brought by AJAX calls, are containing (only) two small gifs (a plus and a minus sign).

    In my AJAX call, after I receive the response from the server I’m reinitializing the scrollpane (the one with dynamic content), I don’t know if I’ve mentioned that I have two scrollpanes on the page which are using your script.

    Now, I have onLine some demo I can show you, and I see that is doing other strange thing. After I order multiple products (using AJAX) and the scrollbar will be needed, it will put only the tracker, the scrollbar itself it is not present until I will refresh once the whole page, and sometimes when I do this, I will see the default browser scrollbar for the other pane, and after another refresh(es) will be ok.

    The link (demo): http://www.maxxpizza.ro/work/meniu/meniuri/, and you have to login with “test” for the user and password. On the Meniu meniuri page will see 5 products, click on all of them (to order them) and see.

    I mention again that this is on IE7.

    On FireFox is ok.

    On Opera it is the default browser scrollbar until a page refresh.

    On Safari is Ok.

    The code for AJAX call is this:

    function(response) {
    xGetElementById(“cart_content”).innerHTML = response;

    $(function() {

    $(’.scroll-pane2’).jScrollPane({showArrows: false, scrollbarWidth: 20, dragMinHeight: 18, dragMaxHeight: 18});
    — Razvan    Dec 26, 11:38    #
  56. Hi again Kelvin,

    I’ve seen that on IE 7, with AJAX call (after the result is back, I’m reinitializing the pane like I’ve shown you in my last message), I get a JS error “exception thrown and not caught”. Only after a complete page refresh everything will be ok again.

    And on FireFox, I’ve got another problem. I’m using mouseWheel also, and if I’m using the wheel to scroll up to one side: top or bottom of the pane, my flash content (menu) will not respond to mouseOver event. Only if I will right-click once, will get back to work.


    — Razvan    Dec 29, 13:56    #
  57. This is very nice. Can anyone tell me how to move up the text so that it is flush at the top?


    — Nowie    Jan 29, 15:29    #
  58. Hi Nowie,

    Glad you like it. If you are seeing space at the top of the text it is probably due to a top margin or padding on the topmost element in your jscrollpane. Try adding:


    To the tag of that element or give it a CSS class and style that appropriately.

    If that doesn’t help then send a link to the page in question and I may be able to help more,


    Kelvin :)

    Kelvin Luck    Jan 29, 19:29    #
  59. Hi Razan,

    Sorry for the slow reply, I missed your comment here…

    I’ve added your issue to the bug tracker on the jQuery plugins site and will look into it when I get a chance (hopefully soon!). You can follow the issue here:



    Kelvin :)

    Kelvin Luck    Jan 29, 19:42    #
  60. Kelvin, please i load some page inside the scrollpane, but have a error when use the function showArrows:true,
    the pane don’t work fine, where i was wrong?
    Please help-me
    (sorry my bad english)

    Joni    Feb 4, 13:08    #
  61. Hi Joni,

    Do you have a link where I can see the problem? Maybe I can help them,


    Kelvin :)

    Kelvin Luck    Feb 4, 14:41    #
  62. Sorry Kelvin: this is the link:

    Joni    Feb 4, 14:57    #
  63. Kelvin, if you don’t open the link try another this:
    without showarrows.

    and see this other with showarrows:

    Joni    Feb 4, 17:14    #
  64. Hi Joni,

    The first example doesn’t work because the element has an id of “pane2” but you call:


    Other than that I think the showArrows example works fine. If you want the scroll pane to reflect the new size of the content then you need to re-initialise the scrollbar after your ajax content has loaded (you can use a callback on the ajax call for this),

    Hope that helps,

    Kelvin :)

    Kelvin Luck    Feb 4, 17:22    #
  65. Hi Kelvin! Great plug-in. How does one remove the scroll plane from a div?

    — Julian Dormon    Feb 19, 15:22    #
  66. Hi Julian,

    It isn’t currently possible to remove the scroll pane after applying it. However, if you re-initialise the scrollpane when the content of the div isn’t enough to need scrolling then it looks like it has been removed (as you can see when you remove the ajax conent in this example). Does that meet your needs?

    If not, can you please submit a enhancement request through the jScrollPane plugin page?


    Kelvin :)

    Kelvin Luck    Feb 20, 13:39    #
  67. Is there any way to make the contents of the scrollable item print nice?
    I’ve been trying with css but so far no luck

    kim Matthé    Mar 18, 14:48    #
  68. Is there a way to scroll to a given element within a jScrollPane from anotehr Java Script? I’m using a MooTools gallery and want the scroll pane to update everytime the picture changes.

    Al    Apr 27, 13:30    #
  69. Hi,

    @kim – sorry for the really slow reply – I only just saw your post. I’m afraid there is no way I know to make a scroll pane print nice. It is a good feature request though so I’ll look into it when (if!) I get a chance. Not in the near future though :(

    @Al – yes, this should be fine. As long as you have jquery coexisting with mootools then you should just be able to call scrollTo from the relevant part of your moo tools script,

    Hope that helps,

    Kelvin :)

    Kelvin Luck    Apr 27, 19:45    #
  70. Hi Kevin

    I used your scroll pane a while ago and found it to be great. I’ve just got the latest version and found a problem (or maybe its just me).

    I’m finding that the width of a div is not fixed properly. What i mean is, if you create a div for the scroll pane with a 200px width, when the scroll bars appear and you do a screenshot etc you find the overall width is about 190px.

    Just take a look at your demo page http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
    and compare the width of the last pane (pane 4) with the others – it is wider – and is the actual width it is supposed to be.

    Any ideas? I’ve tried using css and javascript to dynamically change the width to adjust, but it never quite works right when i try it on safari.


    — Ross    Apr 28, 11:37    #
  71. Getting the same problem. The scrollbar seems to move in to the right, specifically the right edge of it seems to be at scrollbar width + scrollbar margin.

    So my scrollbar width is 12, margin is 5, causing the whole box to be 17 pixels thinner than it should be.

    If that makes sense?

    Ben    May 21, 02:30    #
  72. I have a prob that the scrolled content does not reach the bottom as intended … both on Moz FF and IE 6

    — johan    Jun 22, 06:09    #
  73. Hi Kelvin

    Nice work, but is there any chance of amending the plug-in so that one can jump to a named anchor within the scrolling content?

    There is a Prototype plug-in that does this called ScrollBox.js but I’d love to do this with jQuery! :)

    — Stuart    Jul 15, 14:37    #
  74. Hi guys,

    @ross & ben – Thanks for the bug report. I’ll look into it when I get a chance but I’m not the road at the moment so not sure when that will be… You could have a look back through the svn history because I did apply a patch that someone sent me in and I didn’t test it too much – that may be when it broke…

    @johan – I’d have to see an example page but it’s probably to do with your CSS. Probably e.g. your P’s have margin on the bottom which pushes out the bottom of the scrollpane?

    @stuart – You mean like the example at the bottom of this page?

    Kelvin Luck    Jul 15, 15:51    #
  75. Almost, but not with the ‘rel’ attribute. Using anchors within the link value, like

    — Stuart    Jul 17, 11:46    #
  76. OK, I got the anchor links. I changed the #pane4 click event function to:

    var targetElementSelectorString;
    var url = $(this).attr(‘href’).toString().split(”#”);
    if (url.length > 1) targetElementSelectorString = ’#’ + url[1 ];
    return false;

    So, now (if it’s possible), I think it would be nice if a link to a page like this:


    automatically scrolls to the anchor position on the target page. I think that this would be a really useful addition (and not only because the Prototype version I linked to previously does this! :))

    — Stuart    Jul 17, 14:14    #
  77. Hi Kevin,
    Thank You for sharing! I am having a small problem. If you could help it would be greatly appreciated. I can’t get the drag button to go all the way to the top and bottom arrows (all the text displays, except sometimes(?) not in Safari). I have played around with the CSS to no avail. Here is my test page. Did I mention I’m not much of a coder. : ) http://test.veinaway.com/veintest2a.aspx

    — Lee    Jul 26, 12:38    #
  78. Sorry! Found my own answer with drag pane min/max height in the jscrollpane.js file. I changed the graphics for the scroll bar and needed to adjust the height accordingly.
    Another question though is there a way, at the end of the scrolling(if not using mouse wheel)to reveal the remaing content of my page that extends beyond the scrollpane and my window view? Thanks,

    — Lee    Jul 28, 18:52    #
  79. Killer work on this. It’s a great piece of code.

    One question: I have the jScrollPane applied to a DIV that is set to be 100% of the width of its parent DIV. The parent DIV expands or shrinks based on how the user sizes their browser.

    I notice that the DIV with jScrollPane doesn’t automatically resize, but if I hit refresh, the DIV redraws to the proper size.

    Is there anyway to get the jScrollPane’d DIV to resize as the parent DIV resizes?


    Benjamin Allison    Jul 29, 20:01    #
  80. Hello,
    I have the problem to link from another html-page under the same domain…
    Linking like: ... functions excellent.

    But how is the code to link from another html-page???



    — bitworker    Aug 27, 16:40    #
  81. First, thank you so much for this awesome code. Big help. I have a problem that I can’t figure out, though. I can’t get the scroller to go all the way to the bottom of my scrollbar. It is showing all of my content, but the scroller stops pretty far from my bottom arrow. Can you check it out and let me know if you see any glaring issues? Thanks!


    Valerie W    Sep 2, 18:43    #
  82. Hi Kevin,
    Great code! I am looking for an answer to implement hyperlinks within the pane. I tried using the code in post #76 the links work but my styled pane track disappears to default scroller. I am not a code person. I also tried implemeting a plug-in from jquery scrollto.js and scrolltomin.js but after clicking the link and the scroller style stays but only half of it shows and you are unable to scroll back to the top of page. Hope I explained my problem right. Any help greatly appreciated. Thanks!

    — lee    Sep 28, 17:34    #
  83. Hi Kelvin,

    Really a great work. Excellent. I have implemented your script and it works fine, however I have another requirement that needs to be implemented.

    I have a button at the bottom of my content inside scroll. I want it to be visible always. In short, I want to freeze the position of the button. Is it possible to implelment? Please guide.

    Thanks & Regards,
    Ravi Katre

    — Ravi Katre    Oct 7, 11:29    #
  84. Having an issue in IE7 where the scrollbar disappears when clicking on an anchor link on the page. This only happens on longer pages with the anchor links. Look at the FAQ’s page in IE7 to see the issue. Can you make a suggestion to fix this issue?

    Tammy    Oct 19, 14:41    #
  85. I have the same question as Stuart in question #76. Is it possible to have only the scroll box animate down to the anchored content automatically when the page loads? It’s the last missing element for my project.

    This is a WONDERFUL script by the way. I’ve been looking for this for a long time… You made my day very, very joyous!


    David Cool    Nov 1, 10:17    #