Scrollbar Visibility with jScrollPane

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.
ScrollbarVisibility

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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

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!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 43

Comments are closed.
  1. I’ve used jScrollPane a lot and I am happy to see this improvement comes to it! Thank you 🙂

  2. 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 ?

  3. 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?

  4. 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

  5. @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.

  6. 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?

  7. 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.

  8. With the latest jquery (1.7.2 as of this day) the scrolling with mouse wheel is not working with IE and FF.