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