jQuery Scrollbar

Cross-browser CSS customizable scrollbar with advanced features:

Basic Scrollbars Demo

Advanced Scrollbars Demo

jQuery Scrollbars as Angular.JS directive

Download

Easy to implement

Go to demo pages, find scrollbar that fits your needs, copy html/css/javascript and paste to your page. Modify CSS to change scrollbar colors/sizes. If you can't find scrollbar that fits your needs, contact to author and your scrollbar will be added to demo page.

No fixed height or width

Most of scrollbar plugins require container height or width to be set in order to calculate scrollbar size. jQuery Scrollbar does not require nor height, nor width. You can use max-height/max-width to restrict container size, or use standard height/width in pixels/percents of parent container.

Responsive design support

jQuery Scrollbar can be used in responsive design as there is no need to set fixed height/width to container. Scrollbars will be automatically updated/hidden/displayed when content or container size is changed.

CSS customizable

Use CSS to customize scrollbar colors, sizes or positions. Use simple or advanced HTML structure to customize how scrollbars should look. If simple or advanced HTML structure is not what you are looking for, you can use your own HTML structure with custom elements.

Standard scroll behavior

If your browser can scroll content, jQuery Scrollbar will scroll it too! Why? Because it does not emulate browser scroll behavior as many plugins do, but hides standard scrollbars and displays custom ones. You want to scroll with mouse middle button? - Just use it! You want to scroll with touch? - Do it! Your browser supports custom scroll behavior? - Use it too! Use standard or jQuery scrollTop/scrollLeft functions to get current scroll offset or scroll to any position. Use standard "scroll" event to handle content scrolling. No custom functions/events to know - everything done using standard scroll behavior.

Vertical, horizontal or both scrollbars

Most of the scrollbar plugins allows using only vertical scrollbar, some plugins - vertical or horizontal scrollbars. Only few can use both vertical and horizontal scrollbars, but they have to use scroll emulation which has limitations. jQuery Scrollbar does not emulate scroll behavior and can work with both vertical and horizontal scrollbars together.

Automatically re-initialize scrollbar

Usually scrollbar size and positions are calculated when plugin is initialized. What if content or container size is changed with javascript/ajax? - You have to update plugin to recalculate scrollbar sizes. And it's OK because you know when content is changed. But what to do if you don't know when it is changed? For example, if content contains images without height/width. These images change content size after loading. There are 3 obvious ways: always set image height/width (and force users to set image size for content added with WYSIWYG editor), wait for whole page to load and then initialize scrollbars or handle content images loading and then re-initialize scrollbar plugin. Annoying, isn't it?

jQuery Scrollbar handles content/container size changes and recalculate scrollbar sizes automatically. Just initialize it once and forget about it.

External scrollbars support

jQuery Scrollbar supports 3 types of scrollbars: inner — scrollbar is displayed over content (Apple Mac OS); outer — scrollbar shifts content to display itself (Microsoft Windows scrollbars); external — scrollbar is located in any place of your page. So, you can choose between Apple Mac and Windows style scrollbar or even place it outside of the container and style it as you wish. Cool, isn't it?

Browser support: IE7+, Firefox, Opera, Chrome, Safari

Of course, all modern browsers are supported starting from IE7. The most problematic browser is IE, as you already suspect. But it is not IE7, it is IE8! Surprised? I was! IE7 works better with height/width calculations than IE8. IE8 renderer is crashed when using max-height with overflow:auto. It is officially logged as a bug in the final version of IE8 with no fix. There are also other bugs with max-height/max-width and positioning. So, be careful if you are going to support IE8.

jQuery Scrollbar as Angular.JS directive

Now you can easily use jQuery Scrollbar with Angular.JS as directive. Just include module jQueryScrollbar as dependency in your module, and you can use jQuery Scrollbar on your container with attribute data-jquery-scrollbar. jQuery Scrollbar as Angular.JS directive.

Textarea scrollbars

Apply jQuery Scrollbar to your textarea and enjoy CSS styled scrollbars. Supports IE8+. Fixed height/width are required.

Advanced features that standard scroll has, but scroll emulation plugins have to emulate or don't have at all

jQuery Scrollbar Options

Limitations

FAQ

  1. Question: I need padding between border/scrollbar and text, but scrollbar does not allow it. What to do?

    Answer: Wrap inner content in the div with padding

  2. Question: I need space between content with scrollbar and the rest of the page. What to do?

    Answer: Wrap scrollable content into container with padding.

  3. Question: If content contains images, content size can be changed after images will be loaded. Should I re-initialize scrollbar?

    Answer: No, scrollbar detects content/container size changes automatically and recalculate size or hide/show scrollbars.

  4. Question: How can I scroll content to position I need?

    Answer: Use standard jQuery scrollTop/scrollLeft functions to the container. For example, you have container with class "scrollbar-macosx". Use next code to scroll 50px from top:

    jQuery('.scrollbar-macosx').not('.scroll-content').scrollTop(50);

  5. Question: I want to know when content is scrolled. Is there any callback for this?

    Answer: Yes, you can use "onScroll" callback (look at Angular.JS example), or use standard "scroll" event for container. For example, you have container with class "scrollbar-macosx". Use next code to handle scroll event:

    jQuery('.scrollbar-macosx').not('.scroll-wrapper').on("scroll", function(){
        console.log('content is scrolling');
    });

  6. Question: Scrollbar does not replace standard scrollbar for page/document.

    Answer: It's not good idea to replace standard scrollbar for whole page. But if you really need it, wrap all page into container with height/width 100%, overflow: auto and apply scrollbar to this container.

  7. Question: I do not want to see horizontal scrollbar ever. What to do?

    Answer: Hide it with css like this :)

    .scroll-element.scroll-x {
        display: none !important;
    }
    But do not forget that even if scrollbar is hidden, content is still may be scrollable horizontally.

  8. Question: When I try to get height/width of container with jQuery height/width function it gives me incorrect values.

    Answer: Inner scrollable content uses additional height/width & offset of scrollbar to hide it. To get correct height/width use visible container:

    jQuery('.scrollbar-macosx').not('.scroll-content').height();
    jQuery('.scrollbar-macosx').not('.scroll-content').width();

  9. Question: How to detect DIV is scrolled to bottom?

    Answer: You can make calculations using jQuery "scroll" event or you can use "onScroll" callback function that provides information about container's sizes & offset:

    jQuery('.scrollbar-dynamic').scrollbar({
        "onScroll": function(y, x){
            if(y.scroll == y.maxScroll){
                console.log('Scrolled to bottom');
            }
        }
    });

  10. Question: Can I use jQuery Scrollbar to customize textarea scrollbar?

    Answer: Yes, you can. Textarea scrollbars are supported now. Look at Basic Scrollbars Demo page.

  11. Question: Is it possible to set scrollbar max/min size?

    Answer: Use CSS max-height/min-height (max-width/min-width) to set scrollbar size limits.

  12. Question: I have a question / want to report an issue. How can I contact author?

    Answer: Please email me to 13real008@gmail.com

Compare with other popular scrollbars