jQuery滚动条美化插件

有时候隐藏滚动条对于用户体验来说是一件非常不错的事情，当需要的时候才显示它。这款插件就是使用了jScrollPane和jQuery来实现这种滚动条显示和隐藏的美化效果。

如果你想了解更多关于jScrollPane的知识，请点击这里：jScrollPane – cross browser styleable scrollbars with jQuery and CSS。

HTML结构

<div id="jp-container" class="jp-container">
	<!-- content -->
</div>
    

CSS

.jp-container{
    width:500px;
    height:400px;
    position:relative;
    background:#fff;
    border:1px solid #D8DFEA;
	float:left;
}
    

JAVASCRIPT

// 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();