From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. Today we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.
jScrollPane was created by Kevin Luck and you can read more about it here:
jScrollPane – cross browser styleable scrollbars with jQuery and CSS
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The Markup
An example for the markup used in our demos is the following:
<div id="jp-container" class="jp-container"> <!-- content --> </div>
The jp-container will be our scrollable content area.
The CSS
Besides the style for the custom scrollbar of jScrollPane, we will have the following style for our container:
.jp-container{ width:500px; height:400px; position:relative; background:#fff; border:1px solid #D8DFEA; float:left; }
The JavaScript
We are going to extend the jScrollPane plugin with the new functionality of showing and hiding the scrollbar:
// the element we want to apply the jScrollPane var $el = $('#jp-container').jScrollPane({ verticalGutter : -16 }), // the extension functions and options extensionPlugin = { extPluginOpts : { // speed for the fadeOut animation mouseLeaveFadeSpeed : 500, // scrollbar fades out after // hovertimeout_t milliseconds hovertimeout_t : 1000, // if set to false, the scrollbar will // be shown on mouseenter and hidden on // mouseleave // if set to true, the same will happen, // but the scrollbar will be also hidden // on mouseenter after "hovertimeout_t" ms // also, it will be shown when we start to // scroll and hidden when stopping useTimeout : false, // the extension only applies for devices // with width > deviceWidth deviceWidth : 980 }, hovertimeout : null, // timeout to hide the scrollbar isScrollbarHover: false, // true if the mouse is over the scrollbar elementtimeout : null, // avoids showing the scrollbar when moving // from inside the element to outside, passing // over the scrollbar isScrolling : false, // true if scrolling addHoverFunc : function() { // run only if the window has a width bigger than deviceWidth if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false; var instance = this; // functions to show / hide the scrollbar $.fn.jspmouseenter = $.fn.show; $.fn.jspmouseleave = $.fn.fadeOut; // hide the jScrollPane vertical bar var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide(); /* * mouseenter / mouseleave events on the main element * also scrollstart / scrollstop * @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ */ $el.bind('mouseenter.jsp',function() { // show the scrollbar $vBar.stop( true, true ).jspmouseenter(); if( !instance.extPluginOpts.useTimeout ) return false; // hide the scrollbar after hovertimeout_t ms clearTimeout( instance.hovertimeout ); instance.hovertimeout = setTimeout(function() { // if scrolling at the moment don't hide it if( !instance.isScrolling ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); }, instance.extPluginOpts.hovertimeout_t ); }).bind('mouseleave.jsp',function() { // hide the scrollbar if( !instance.extPluginOpts.useTimeout ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); else { clearTimeout( instance.elementtimeout ); if( !instance.isScrolling ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); } }); if( this.extPluginOpts.useTimeout ) { $el.bind('scrollstart.jsp', function() { // when scrolling show the scrollbar clearTimeout( instance.hovertimeout ); instance.isScrolling = true; $vBar.stop( true, true ).jspmouseenter(); }).bind('scrollstop.jsp', function() { // when stop scrolling hide the // scrollbar (if not hovering it at the moment) clearTimeout( instance.hovertimeout ); instance.isScrolling = false; instance.hovertimeout = setTimeout(function() { if( !instance.isScrollbarHover ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); }, instance.extPluginOpts.hovertimeout_t ); }); // wrap the scrollbar // we need this to be able to add // the mouseenter / mouseleave events // to the scrollbar var $vBarWrapper = $('<div/>').css({ position : 'absolute', left : $vBar.css('left'), top : $vBar.css('top'), right : $vBar.css('right'), bottom : $vBar.css('bottom'), width : $vBar.width(), height : $vBar.height() }).bind('mouseenter.jsp',function() { clearTimeout( instance.hovertimeout ); clearTimeout( instance.elementtimeout ); instance.isScrollbarHover = true; // show the scrollbar after 100 ms. // avoids showing the scrollbar when moving // from inside the element to outside, // passing over the scrollbar instance.elementtimeout = setTimeout(function() { $vBar.stop( true, true ).jspmouseenter(); }, 100 ); }).bind('mouseleave.jsp',function() { // hide the scrollbar after hovertimeout_t clearTimeout( instance.hovertimeout ); instance.isScrollbarHover = false; instance.hovertimeout = setTimeout(function() { // if scrolling at the moment // don't hide it if( !instance.isScrolling ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); }, instance.extPluginOpts.hovertimeout_t ); }); $vBar.wrap( $vBarWrapper ); } } }, // the jScrollPane instance jspapi = $el.data('jsp'); // extend the jScollPane by merging $.extend( true, jspapi, extensionPlugin ); jspapi.addHoverFunc();
And that’s it! I hope you liked this little extension and find it useful!
Hi,
This is amazing.. but is it possible to make it auto-scroll so that it can be also use as news ticker..
Great demo! Thanks so much for posting.
Nice and very useful work cura! Thank you!
This code works fine in iOS? i test it in my Android with success, but would it works fine in iOS too?
Simply awesome!
Like This ^_^
gran articulo…;)
Love it – Thanks =)
So Smooth ?
Thanks again Mary Lou, you are so connected and moving ahead all the time. Thanks!
nice post…. but what about browser compatibility?
Great tutorial. I however used code from the jScrollPane plugin site that you listed above, as I did not want to hide the scroll bars.
Since I used it on a Ning network where source code access is not an option, I had to use http://api.jquery.com/addClass/ to add the .scroll-pane class to an element in order to use jScrollPane.
I have wanted to create custom scroll bars on Ning websites for awhile now and your tutorial pointed me in the right direction.
Thank you!
-Flint
Very nice & amazing plugint, thank you! 🙂
Another great tutorial
One bug:
When I scroll and go away my cursor, then scrollbar disapear.
Hi kartofelek, thanks! That’s not a bug but the intended functionality. The scrollbar should disappear when you move out of the container even if you are still scrolling. Cheers, ML
Thanks!
Great tutorial for an awesome plugin!
great tutorials, almost the same like FB scroll pane.. 😀 hahha.. anyway this is awesome now i can make my blog looks more elegant with the Jscrollpane 😉 thanx ML you’re the best!
eshanne.
Very usefull !.
Tnkx.
Dn.
Great tutorial and veru useful too but it doesn’t seems to work on internet explorer !
Do you know how to fix it ?
Thanks for your help !
very nice!
but there are sth wrong with IE8 , can u give the perfect solution?
in china IE used Widely…..thanks
The demo works perfectly in Internet Explorer 6, 7, 8 and 9.
The scrollbar looks slightly different (no rounded corners) in the older versions, but besides that it works like a breeze.
Thanks for the great tutorial, amazing work!
m.
i have a question on this scrollbar effect, will it able to work in ipad product?
How about Horizontal scrolling?
I’ve used jScrollPane a lot and I am happy to see this improvement comes to it! Thank you 🙂
@KULDEEP DAFTARY jScrollPane support horizontal scrolling too. Check its demo here
http://jscrollpane.kelvinluck.com/basic.html
how about multiple scroller in one page?
great article.. nice plug-in.. wud like to know more about the browser compatibilty…
Hello, I’ve used this tutorial to set multiple scrollable area.
Everything works, but the only problem I’ve got is the following one :
The first element display the scroll bar when mouse is over, but the other elements always show the scroll bar…
Does anyone know what I am missing here ?
Can this be made in to a auto-ticker?
How can I get multiple instances of this plugin to work on the same page?
Can I use it for my website?
Hello, thanks a lot for your script, i have been testing it, but i got some problems when i used it in the ipad 2, the autohidden feature is not working fine, could you please give us an update or give us some solution?
Great, but how do I use more than one on a page?
hi! great tutorial!
anyway, how to add an arrow and styling it? thanks for advanced.. 🙂
Hi Mary,
Thanks for your awesome tut.
I tried to get this extension working on multiple instances.
The first element works but the others not.
Can you help me? Thanks a lot
@bastienald I’ve solved that.
Create a function and add the extension to that function.
send your selector as parameter to function.
for how many elements you want call that function.
Hello Mary! Great tuttorial!
If in css
.jp-container{
width: 100%;
….
}
and resize the browser window, the width of the panel does not change dynamically. Only after reloading the page.
How to do it right?
I found the answer to my question in the demo files to JScrollPane
Hi, I tried to set the example for my needs but it does not work,
I control my site sizes by percentage and not pixels, that to fit any resolution,
I changed only one property in the css but does not generate the scroll
.jp-container
{
width: 500px; /*aca modificacion*/
height:100%;
position: relative;
background: #fff;
border: 1px solid #D8DFEA;
float: left;
}
when the property is by HEIGHT pixels if it works, but I need to handle by percentage,
before was the height at 500px
Thank you.
Serjao,
try to combine with this example http://jscrollpane.kelvinluck.com/dynamic_height.html
With the latest jquery (1.7.2 as of this day) the scrolling with mouse wheel is not working with IE and FF.
Hi, how can I use this without the linkon the divs? I’ve tried to use without it but the divs disappear :/
Heya Mary Lou, i’m with a big problem here because i dont know what i need to do to resolve this. When i put the javascript function on the page, the page loads with a WINDOW: “AJAX ERROR: blank” as you can see in http://www.thehitz.com.br/loja.php. What can i do to remove that?
The javascript:
$(function() {
// the element we want to apply the jScrollPane
var $el = $(‘#conteudo-container’).jScrollPane({
verticalGutter : -16
}),
// the extension functions and options
extensionPlugin = {
extPluginOpts : {
// speed for the fadeOut animation
mouseLeaveFadeSpeed : 500,
// scrollbar fades out after hovertimeout_t milliseconds
hovertimeout_t : 1000,
// if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
// if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after “hovertimeout_t” ms
// also, it will be shown when we start to scroll and hidden when stopping
useTimeout : false,
// the extension only applies for devices with width > deviceWidth
deviceWidth : 980
},
hovertimeout : null, // timeout to hide the scrollbar
isScrollbarHover: false,// true if the mouse is over the scrollbar
elementtimeout : null, // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
isScrolling : false,// true if scrolling
addHoverFunc : function() {
// run only if the window has a width bigger than deviceWidth
if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;
var instance = this;
// functions to show / hide the scrollbar
$.fn.jspmouseenter = $.fn.show;
$.fn.jspmouseleave = $.fn.fadeOut;
// hide the jScrollPane vertical bar
var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide();
/*
* mouseenter / mouseleave events on the main element
* also scrollstart / scrollstop – @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
*/
$el.bind('mouseenter.jsp',function() {
// show the scrollbar
$vBar.stop( true, true ).jspmouseenter();
if( !instance.extPluginOpts.useTimeout ) return false;
// hide the scrollbar after hovertimeout_t ms
clearTimeout( instance.hovertimeout );
instance.hovertimeout = setTimeout(function() {
// if scrolling at the moment don't hide it
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
}).bind('mouseleave.jsp',function() {
// hide the scrollbar
if( !instance.extPluginOpts.useTimeout )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
else {
clearTimeout( instance.elementtimeout );
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}
});
if( this.extPluginOpts.useTimeout ) {
$el.bind('scrollstart.jsp', function() {
// when scrolling show the scrollbar
clearTimeout( instance.hovertimeout );
instance.isScrolling = true;
$vBar.stop( true, true ).jspmouseenter();
}).bind('scrollstop.jsp', function() {
// when stop scrolling hide the scrollbar (if not hovering it at the moment)
clearTimeout( instance.hovertimeout );
instance.isScrolling = false;
instance.hovertimeout = setTimeout(function() {
if( !instance.isScrollbarHover )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
});
// wrap the scrollbar
// we need this to be able to add the mouseenter / mouseleave events to the scrollbar
var $vBarWrapper = $('’).css({
position : ‘absolute’,
left : $vBar.css(‘left’),
top : $vBar.css(‘top’),
right : $vBar.css(‘right’),
bottom : $vBar.css(‘bottom’),
width : $vBar.width(),
height : $vBar.height()
}).bind(‘mouseenter.jsp’,function() {
clearTimeout( instance.hovertimeout );
clearTimeout( instance.elementtimeout );
instance.isScrollbarHover = true;
// show the scrollbar after 100 ms.
// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
instance.elementtimeout = setTimeout(function() {
$vBar.stop( true, true ).jspmouseenter();
}, 100 );
}).bind(‘mouseleave.jsp’,function() {
// hide the scrollbar after hovertimeout_t
clearTimeout( instance.hovertimeout );
instance.isScrollbarHover = false;
instance.hovertimeout = setTimeout(function() {
// if scrolling at the moment don’t hide it
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
});
$vBar.wrap( $vBarWrapper );
}
}
},
// the jScrollPane instance
jspapi = $el.data(‘jsp’);
// extend the jScollPane by merging
$.extend( true, jspapi, extensionPlugin );
jspapi.addHoverFunc();
});