The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jScrollbar : Customize your own scrollbar with jQuery UI

Plugin rate :

Had you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn't match up with your design ?

Make your own scrollbar design with jScrollbar !

jScrollbar is fully skinnable with CSS (you can use images instead) and can detect mousewheel event.

Implementation: 

1. FIRST, INCLUDE THE CSS & JQUERY FILES

1
2
3
4
5
6
7
8
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jScrollbar.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mousewheel.js"></script>
<script type="text/javascript" src="jScrollbar.jquery.js"></script>

2. ADD YOUR HTML !

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Main container -->
<div class="jScrollbar">
    <!-- Scrolling content container -->
    <div class="jScrollbar_mask">
        <p>
        <!-- Your long content here -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...
        </p>
    </div>
    <!-- slider container -->
    <div class="jScrollbar_draggable">
        <!-- slider -->
        <a href="#" class="draggable"></a>
    </div>
    <!-- don't forget to clear the floats -->
    <div class="clr"></div>
</div>

3. NOW, CALL THE JSCROLLBAR PLUGIN

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    $(document).ready(function(){
    // simple jScrollbar plugin call
    $('.jScrollbar').jScrollbar();
    // more complex jScrollbar plugin call
    $('.jScrollbar').jScrollbar({
        scrollStep : 25,
        position : 'left',
        showOnHover : true
    });
});
</script>
Options: 
position
String
Default : 'right' - Can be set to 'left' or 'right'
showOnHover
Boolean
Default : false - If true, jScrollbar is displayed only on hover event
allowMouseWheel
Boolean
Default : true - Allow scrolling with the mousewheel
scrollStep
Integer
Default : 10 - Speed/step of the scrolling effect using the mousewheel
Screenshots

Comments

Hello,
can you specify me how to disable or destroy an element after $("#myElement").jScrollbar() called??

Can i make $("#myElement").jScrollbar("destroy")???

Please

Hi grimbo,

I can't see what you want to do !
Why do you want to destroy an element after the scrollbar call ?

Can you fix your element with the CSS (el{display:none}) ?

Thanks

I believed it was likely to be several uninteresting old article, but it surely paid for my time. I will article a hyperlink for this web site on my own website. More than likely this site site visitors will discover in which very useful.
Warn

The plugin "jscrollbar" is with broken link in github.
Thanks..

Hello Im a Chinese. And I found it is not work when I use Ajax . Just no scrollbar appears, I am confused. %>_<%

I met this problem too, I figure it out with another trigger to make the scrollbar appear, just like



$('#something').mouseover(function(){$('.jScrollbar').jScrollbar();})


hope it could help, btw, I am chinese too.

Hello, how can i set the scrollbar to the bottom automatically? But i don't know the length (i mean height) of content in div.

when the text is smaller than the size of the scrollbar is to position the head to the left, creating a bad visual effect

Hi, thanks for this, it was exactly what I needed. I'm having trouble with one thing, though: I want to set the height of the scrolling section to the height of the browser window and I can't figure out how. Setting the heights to 100% screws everything up.

The scrollbar only works when the zoom is set to 100% in Google Chrome. When I zoom out, I cannot scroll down. When I zoom in, I can scroll down, but then when I try scrolling back up, my content disappears. Does anyone know how to fix this problem?

Hi Tara,

It works for me when i zoom in/out.
Are you sure you don't have a javascript error ?

this plugin is not working on joomla 2.5 plz help me

Thank you for this plugin! It work´s fine, but...

I have problem with the tablet view. The scrollbar doesn´t work on my tablet (Android / Dolphin). It show´s me the scrollbar and the content but unfortunately without a functioning.

plz help me

Hi, iam newbie, i used the plugin it works fine, but i have problem.

/--link-intially it shows only 100letters
when click on expand to full content.

normally it displays full content before expand.
after expanding link it dispalys content with previous height

it happens only with expand/collapse link it woks fine when a lot of text is added.

please any suggestions ...........

I was just wondering if there is a way of setting an anchor link within the div with your scrollbar on. And obviously for the scroll bar to move when the anchor link is clicked.

Thanks!

Hi sam,

Actually, you can't do that. but it's a great idea for the next version !

Thanks

Thanks for the quick response!

Aww that is a shame, would have been perfect for a project I'm working on. Do you think you'll be releasing a new version any time soon? :)

Thank you once again, very handy plugin!

Unfortunately, the next release with this feature is not coming soon.. I have no time for that.. But if you know a little bit jQuery, you can try to add this for your project !

Regards,

Hi! I have aproblem with draggable stoping. when i scroll the bar to top or to bottom of the scrollable div, it is still possible to scroll bar and it is disapearing, not stoping. Please help to solve that...Thanks.

Hi.. I have Problem this plugin not working in joomla 2.5 . its not show scroll on mouse over and other event.
please tell me what's problem .
thanks

Hi Maiki, are you the author of plus? Thank you for the nice plus.
I am using it and I found a small problem. When we scroll in the defined area, the whole page will also be scrolled.
I checked the code and added 'return false;' on the end of mousewheel method, then the problem was fixed.
Hope it is helpful.

Thanks !

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.3
jQuery U.I
>= 1.3
Current version
1.6
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [22]