jScrollPane的滚动条可见性

View demo 查看演示 Download Source 下载源

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.

有时，隐藏网站中元素的滚动条并仅在用户真正需要时才显示它是非常有用的。 Facebook中的实时活动提要就是这种行为的一个示例。 今天，我们想向您展示如何使用jScrollPane并对其进行扩展以隐藏滚动条并在悬停时显示它。

jScrollPane was created by Kevin Luck and you can read more about it here: jScrollPane – cross browser styleable scrollbars with jQuery and CSS

jScrollPane由Kevin Luck创建，您可以在此处了解更多信息： jScrollPane –使用jQuery和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.

jp容器将是我们的可滚动内容区域。

CSS (The CSS)

Besides the style for the custom scrollbar of jScrollPane, we will have the following style for our container:

除了jScrollPane的自定义滚动条的样式外，我们的容器还将具有以下样式：

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

JavaScript(The JavaScript)

We are going to extend the jScrollPane plugin with the new functionality of showing and hiding the scrollbar:

我们将使用显示和隐藏滚动条的新功能扩展jScrollPane插件：

// 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!

就是这样！ 希望您喜欢这个扩展功能，并发现它有用！

翻译自: https://tympanus.net/codrops/2011/09/30/scrollbar-visibility-with-jscrollpane/