jQuery自定义美化滚动条

本文作者html5tricks,转载请注明出处

今天我们要来分享一款很不错的jQuery插件,这款jQuery应用插件主要实现自定义的滚动条,并且利用CSS美化这些自定义的滚动条。这款jQuery自定义滚动条的功能和原始的差不多,遗憾的是,这款自定义滚动条不支持鼠标滚动。

jquery-custom-scroll-bar

接下来我们来分析一下实现这款自定滚动条的方法以及源代码,代码主要由HTML、CSS以及jQuery组成,先来看看HTML代码。

HTML代码:

<div id="jp-container">
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/16.jpg"/>
						<div>
							<h3>Responsive Image Gallery with Thumbnail Carousel</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/15.jpg"/>
						<div>
							<h3>Elastislide - A Responsive jQuery Carousel 
							Plugin</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/14.jpg"/>
						<div>
							<h3>Slicebox - A fresh 3D image slider with graceful 
							fallback</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/13.jpg"/>
						<div>
							<h3>Automatic Image Montage with jQuery</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/12.jpg"/>
						<div>
							<h3>Image Zoom Tour with jQuery</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/11.jpg"/>
						<div>
							<h3>Circular Content Carousel with jQuery</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/10.jpg"/>
						<div>
							<h3>Portfolio Image Navigation with jQuery</h3>

						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/9.jpg"/>
						<div>
							<h3>Expanding Fullscreen Grid Portfolio</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/8.jpg"/>
						<div>
							<h3>Content Rotator with jQuery</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/7.jpg"/>
						<div>
							<h3>Vertical Sliding Accordion with jQuery</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/6.jpg"/>
						<div>
							<h3>Animated Text and Icon Menu with jQuery</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/5.jpg"/>
						<div>
							<h3>Fullscreen Slideshow with HTML5 Audio and jQuery</h3>
						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/4.jpg"/>
						<div>
							<h3>Sliding Background Image Menu with jQuery</h3>

						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/3.jpg"/>
						<div>
							<h3>Grid Navigation Effects with jQuery</h3>

						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/2.jpg"/>
						<div>
							<h3>Image Wall with jQuery</h3>

						</div>
					</a>
					<a target="_blank" href="http://js.itivy.com/">
						<img src="images/thumbs/1.jpg"/>
						<div>
							<h3>Sliding Letters with jQuery</h3>

						</div>
					</a>
				</div>

我们去掉了大段的文字内容,这样整个HTML结构就非常清晰,主要是构造了一个较长的下拉列表,好让滚动条可以出现,并且可以拉动滚动条。

CSS代码:

.jp-container{
    width:500px;
    height:400px;
    position:relative;
    background:#fff;
    border:1px solid #D8DFEA;
	float:left;
}
.jp-container a{
    padding:15px 20px;
    display:block;
    line-height:20px;
    background-color: #fff;
    border-bottom:1px solid #F2F4F8;
    border-top:1px solid #D8DFEA;
}
.jp-container a:first-child{
    border-top:none;
}
.jp-container a:last-child{
    border-bottom:none;
}
.jp-container a:hover{
   background:#ECEFF5;
   border-bottom-color:#ECEFF5;
}
.jp-container a h3{ 
    font-size:14px;
    font-weight:bold;
    padding:2px 0 5px 0;
	text-transform:uppercase;
}
.jp-container a img{
    float:left;
    margin:5px 10px 0px 0px;
    padding:3px;
    background:#fff;
    border:1px solid #D8DFEA;
}

CSS代码就较为简单了,没有什么特别。另外滚动条的下拉按钮的CSS代码如下:

.jspDrag
{
	background: #79a1b5;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	border:1px solid #56839a;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

主要是对4个角进行了样式渲染,这样整个滚动条就显得非常漂亮。

jQuery代码:

$(function() {

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

			});

这样这款jQuery自定义美化滚动条就完成了,全部代码大家可以下载源码来研究学习。

在线演示源码下载

热门推荐

jQuery自定义美化滚动条》上有2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>