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

更多相关文章

随机推荐