jQuery Scrollbar
Cross-browser CSS customizable scrollbar with advanced features:- Easy to implement
- No fixed height or width
- Responsive design support
- CSS customizable
- Standard scroll behavior
- Vertical, horizontal or both scrollbars
- Automatically re-initialize scrollbar
- External scrollbars support
- Browser support: IE7+, Firefox, Opera, Chrome, Safari
- jQuery Scrollbar as Angular.JS directive
- Textarea scrollbars
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
- mouse middle button / touch / arrow buttons scrolling
- auto content scrolling when selecting text
- auto scrolling to focused element
jQuery Scrollbar Options
-
autoScrollSize [true|false] (default: true)
automatically calculate scrollbar size depending on container/content size -
autoUpdate [true|false] (default: true)
automatically update scrollbar if container/content size is changed -
disableBodyScroll [true|false] (default: false)
if option enabled and mouse is over scrollable container, main page won't be scrolled -
duration [ms] (default: 200)
scroll speed duration when mouse is over scrollbar (scroll emulating mode) -
ignoreMobile [true|false] (default: false)
do not initialize custom scrollbars on mobile devices -
ignoreOverlay [true|false] (default: false)
do not initialize custom scrollbars in browsers when native scrollbars overlay content (Mac OS, mobile devices, etc...) -
scrollStep [px] (default: 30)
scroll step when mouse is over scrollbar (scroll emulating mode) -
showArrows [true|false] (default: false)
add class to show scrollbar arrows in advanced scrollbar -
stepScrolling [true|false] (default: true)
emulate step scrolling on mousedown over scrollbar -
scrollx [string|element] (default: simple)
simple, advanced, HTML or jQuery element for horizontal scrollbar -
scrolly [string|element] (default: simple)
simple, advanced, HTML or jQuery element for vertical scrollbar -
onDestroy [function] (default: null)
callback function when scrollbar is destroyed -
onInit [function] (default: null)
callback function when scrollbar is initialized first time -
onScroll [function] (default: null)
callback function when cotnainer is scrolled -
onUpdate [function] (default: null)
callback function before scrollbars size calculated
Limitations
- scrollable element should not have paddings, margins, left/top values
- do not use max-height in IE8 - it crashes browser renderer
- custom scroll is not initialized in Firefix under MacOS because of bug with hiding native overlay scrollbar
FAQ
-
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
-
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.
-
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.
-
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);
-
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'); });
-
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.
-
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. -
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();
-
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'); } } });
-
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.
-
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.
-
Question: I have a question / want to report an issue. How can I contact author?
Answer: Please email me to 13real008@gmail.com