JQuery滚动条插件jScrollPane的详细使用(除去点击边框)

     JQuery  jScrollPane是一款强大的滚动条插件，它提供了众多设置设置选项来控制滚动条，而且还有可控的CSS选项来更改滚动条外观。浏览器提供了默认的滚动条，仅当元素内容溢出时且样式overflow:auto或scroll时才会显示，由于滚动条是浏览器默认的，所以不可控，而且外观很丑，在设计优美的网页时，浏览器默认的滚动条会使视觉效果大打折扣。JQuery  jScrollPane可以完美解决浏览器默认滚动条的缺点，下面将由浅及深介绍它的使用。

    简单使用

        1、引入核心文件

            由于是jQuery插件，所以要引入jQuery库  

      <script type="text/javascript" src="jquery-1.11.3.js"></script>

            为了更灵活适配鼠标操作，需引入鼠标滚动库      

      <script type="text/javascript" src="jquery.mousewheel.js"></script>

            最后引入jScrollPane库

      <script type="text/javascript" src="jquery.jscrollpane.js" ></script>

           引入jScrollPane样式表        

      <link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css"/>

        2、编写HTML页面内容，并对需要滚动的元素设置width、height及提供唯一标识ID或class供选择，如下简单demo：    

      <div id="scroller" class="hello" style="width: 1000px;height: 800px;overflow: hidden;">
	   <div style="width: 100%;height: 300px;">Hello World</div>
	   <div style="width: 100%;height: 300px;">Hello World</div>
	   <div style="width: 100%;height: 300px;">Hello World</div>
	   <div style="width: 100%;height: 300px;">Hello World</div>
      </div>

         备注：id为scroller的div高度是800px，4个子div高度分别都是300px，总高度大于父元素高度，而父容器样式：overflow:hidden所以超出部分会隐藏。

        3、编写js代码，  

<span style="color:#000000;">      $(function(){
	  $("#scroller").jScrollPane();
      })</span>

      以上代码就提供了基于jScrollPane的简单滚动条。

      修改滚动条样式

      由于jScrollPane默认滚动条样式很丑，但是提供了单独的CSS样式，所以可以随意改动CSS样式表，满足自身网页需求，改动步骤如下：

      1、查看滚动元素内容结构及应用样式，如下图：

        

         2、打开jquery.jscrollpane.css样式表，一般是需要调整右侧滚动条的外观如宽度、默认高度、颜色等等，这里对应jspVerticalBar下面的样式，具体如何修改这里不再描述。

     使用jScrollPane设置选项

    jScrollPane提供了如下设置选项

     

		showArrows					: false,
		maintainPosition			: true,
		stickToBottom				: false,
		stickToRight				: false,
		clickOnTrack				: true,
		autoReinitialise			: false,
		autoReinitialiseDelay		: 500,
		verticalDragMinHeight		: 0,
		verticalDragMaxHeight		: 99999,
		horizontalDragMinWidth		: 0,
		horizontalDragMaxWidth		: 99999,
		contentWidth				: undefined,
		animateScroll				: false,
		animateDuration				: 300,
		animateEase					: 'linear',
		hijackInternalLinks			: false,
		verticalGutter				: 4,
		horizontalGutter			: 4,
		mouseWheelSpeed				: 3,
		arrowButtonSpeed			: 0,
		arrowRepeatFreq				: 50,
		arrowScrollOnHover			: false,
		trackClickSpeed				: 0,
		trackClickRepeatFreq		: 70,
		verticalArrowPositions		: 'split',
		horizontalArrowPositions	: 'split',
		enableKeyboardNavigation	: true,
		hideFocus					: false,
		keyboardSpeed				: 0,
		initialDelay                : 300,        // Delay before starting repeating
		speed						: 30,		// Default speed when others falsey
		scrollPagePercent			: .8		// Percent of visible area scrolled when pageUp/Down or track area pressed

       如果要让滚动条上下两边出现箭头，并当鼠标放在箭头上面时，滚动条立即滚动到相应位置，可以这样使用：

    var setting={arrowScrollOnHover:true,showArrows:true};
    $("#scroller").jScrollPane(setting);

      开发人员可以根据以上提供的设置选项自行设置。

    滚动元素内容动态增加及时更新滚动条

     我们可以看到setting options有个   自动重新初始化选项，默认为false，即不刷新滚动条，于是当滚动元素内容添加时，滚动条跟内容就很不协调了，有时候甚至会出现这样的bug：开始时需滚动元素内容为空，当逐渐添加内容超出父容器时，滚动条没有出现。解决方法其实很简单，将下面的值设置为true即可。

   autoReinitialise			: false,

    下面进一步探讨自动重新初始化滚动条，来看看代码如下：

    

				if (settings.autoReinitialise && !reinitialiseInterval) {
					reinitialiseInterval = setInterval(
						function()
						{
							initialise(settings);
						},
						settings.autoReinitialiseDelay
					);
				} else if (!settings.autoReinitialise && reinitialiseInterval) {
					clearInterval(reinitialiseInterval);
				}

    可见，源码是设置了定时器，每隔一定时间来刷新滚动条，这个很浪费资源，由于浏览器刷新很快，如果考虑到占用资源的情况下，最好不要将自动刷新设置为true，下面讲解其它刷新滚动条方法

   滚动条的初始化代码如下：

		settings = $.extend({}, $.fn.jScrollPane.defaults, settings);

		// Apply default speed
		$.each(['arrowButtonSpeed', 'trackClickSpeed', 'keyboardSpeed'], function() {
			settings[this] = settings[this] || settings.speed;
		});

		return this.each(
			function()
			{
				var elem = $(this), jspApi = elem.data('jsp');
				if (jspApi) {
					jspApi.reinitialise(settings);
				} else {
					$("script",elem).filter('[type="text/javascript"],:not([type])').remove();
					jspApi = new JScrollPane(elem, settings);
					elem.data('jsp', jspApi);
				}
			}
		);

   这里看最后一个  return 语句中的function函数内容：当我们第一次初始化 jScrollPane的时候，执行  else 语句中的内容，new 一个  JScrollPane对象，参数elem为jQuery选取的元素，settings即为选项，然后通过HTML5 data保存在elem上，如果再次初始化就执行if语句，也就是reinitialise 重新刷新滚动条，，这里是手动刷新，就不再那么占用资源了。

   手动刷新如下：

 

				var setting={autoReinitialise:false};
				//初始化滚动条
				var jspApi=$("#scroller").jScrollPane(setting);
				//获取滚动条
				var refreshApi=jspApi.data("jsp");
				//重新加载刷新滚动条
				refreshApi.reinitialise(settings);

    备注：滚动元素内容每次改变时，都要调用  

  refreshApi.reinitialise(settings);  手动刷新。

 这样实现的jScrollPane有个bug：当点击滚动区域时，周围会出现边框，可以修改  jquery.jscrollpane.css中的样式消除边框：

   

<span style="color:#FF0000;">.jspScrollable{
	outline: none;
}</span>
.jspContainer
{
	overflow: hidden;
	position: relative;
	<span style="color:#FF6666;">outline: none;</span>
}