not working: jquery custom scrollbar please help?

Question

I am having quite a bit of difficulty trying to integrate a jScrollPane (or any custom scrollbar) into a tab that I'm using jquery to render a fade-in-fade-out effect.

I'm rendering tabs doing this:

http://jsfiddle.net/3WzAY/

But whenever I add any sort of jquery custom tab scrollbar ( http://jscrollpane.kelvinluck.com/mwheel_intent.html , or anything else [i can only post two links here]) the scrollbar totally fails to render. When I check the source code of the pages on the internet, it seems as if the divs for the scroll panes, and bars, and tracks that the code is supposed to render dynamically just aren't being created at all.

I've been doing this for so long with out any success at all, I would be so grateful if someone can help me make one of these tabs scrollable! Thank you so much!

Answer 1

It was a pain working with jScrollPane. I tried to use it with hidden tabs too, with no success. And then I found tinyscrollbar-plugin.

You can look at the example here.

Initialize the plugin first:

$(function() {
    $('.scrollbar1').tinyscrollbar();
    tabs.create();
});

and then update it every time you open a tab

$('#objects').tabs({
    show: function() {
        $('.scrollbar1').tinyscrollbar().update;
    }
});

Answer 2

after trying 3 scroll-bars

this is the only one that worked for me.

https://github.com/nathggns/Scrollbars

give it a try