jScrollPane是一款优秀的jQuery插件，它能够同定制化的方式为网页中的元素创建滚动条。这个插件的设计初衷是解决浏览器默认滚动条不美观、不易定制化的问题。jScrollPane不仅允许我们在页面上使用自己喜欢的样式创建滚动条，还能为滚动条增加各种事件以及自定义滚动条的宽度和高度。本文将会介绍jScrollPane插件的基本使用方法、如何配置滚动条的外观、使用事件监听器以及如何为滚动条自定义滚动速度等各种高级应用。
一、 基本使用
首先需要下载jScrollPane插件，可以从GitHub或者官方网站（http://jscrollpane.kelvinluck.com/）获取到该插件。下载下来后将jquery.jscrollpane.min.js和jquery.mousewheel.js两个文件添加到你的项目中，并在HTML页面中引用。
<head>
...
<link href="path/to/jquery.jscrollpane.css" rel="stylesheet" type="text/css">
<script src="path/to/jquery.js" type="text/javascript"></script>
<script src="path/to/jquery.mousewheel.js" type="text/javascript"></script>
<script src="path/to/jquery.jscrollpane.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll-pane').jScrollPane();
});
</script>
</head>
<body>
<div class="scroll-pane">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit nulla ipsum, eu fringilla odio pharetra sed. Nullam in efficitur odio, quis finibus sem. In ac mi mollis, blandit odio posuere, bibendum velit. Mauris feugiat porttitor molestie. Integer ultricies libero ac justo varius bibendum. Duis porttitor iaculis est, sit amet lobortis nisi porttitor vitae. Suspendisse et nibh vel augue mattis consequat et a neque. Donec lacus urna, gravida non tincidunt sit amet, consectetur vitae turpis. Integer congue convallis consequat. Ut faucibus hendrerit bibendum. Aenean blandit, turpis eu consequat ultrices, nisl odio tincidunt tortor, ut rhoncus odio nisl vitae ipsum.</p>
</div>
</body>
上述代码可以为任意div元素创建一个基本的滚动条，在实际开发中我们可以通过修改CSS样式表来定制化滚动条的外观。如果需要为页面上多个元素添加滚动条，则可以在每个需要添加滚动条的元素上调用jScrollPane方法，如下示例：
$(document).ready(function() {
$('.scroll-pane').jScrollPane();
$('.custom-scroll-pane').jScrollPane({
showArrows: true,
verticalGutter: 30
});
});
二、 定制化滚动条的外观
jScrollPane的一个最大优点就是可以根据项目需要配置滚动条的外观，比如修改滚动条的大小、更换滚动条的图标、显示箭头，这些都能够通过修改CSS样式表或在js中传入参数来实现。
1. 改变滚动条的大小
滚动条的大小（即宽度和高度）可以在CSS样式表中设置，比如：
.scroll-pane {
width: 200px;
height: 300px;
}
.jspVerticalBar {
width: 10px;
background: #000;
}
.jspDrag {
background: #ccc;
}
上面的代码为一个元素创建了一个宽度为200px，高度为300px的滚动区域，同时将垂直滚动条的宽度设置为10px，滚动条的背景色为黑色，拖动条的背景色为灰色。
2. 更换滚动条的图标
jScrollPane默认使用了两张图片作为滚动条的图标，这两张图片也可以更换为自定义的图片。下面我们使用自定义的图片来替代默认的滚动条图标：
.scroll-pane {
width: 200px;
height: 300px;
}
.jspVerticalBar {
width: 10px;
background: #FFF url('img/scrollbar_vert.gif') 0 0 repeat-y;
}
.jspHorizontalBar {
height: 10px;
background: #FFF url('img/scrollbar_horz.gif') 0 0 repeat-x;
}
.jspDrag {
background: url('img/drag.gif') no-repeat;
}
上面的代码将图片路径设置为相对路径，并将垂直滚动条和水平滚动条的背景图替换成自定义图标，同时拖动时也使用自定义的图标。
3. 显示箭头
使用showArrows参数可以在滚动条的两端显示小尖角，表示可以滑动的方向。下面的代码将为垂直滚动条显示箭头：
$('.scroll-pane').jScrollPane({
showArrows: true
});
三、 事件监听器
jScrollPane也支持各种事件监听器，可以根据需要调用相应的事件来完成各种效果。下面我们将介绍一些常用的事件监听器。
1. 滚动条滑动事件监听器
可以通过监听滑动条的滚动事件，来实现滑动时执行相应的代码。下面的代码将在垂直滚动条滑动时控制台输出当前滚动条的位置：
$('.scroll-pane').bind(
'jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom) {
console.log('Scroll position:', scrollPositionY);
}
);
2. 滚动区域大小改变时事件监听器
可以通过监听滚动区域尺寸改变事件，来实现滚动区域大小改变时执行相应的代码。下面的代码将在滚动区域大小变化时控制台输出当前滚动区域的宽度和高度：
$('.scroll-pane').bind(
'jsp-initialised',
function(event, isScrollable) {
console.log('Scrollable:', isScrollable, 'Width:', $('.scroll-pane').width(), 'Height:', $('.scroll-pane').height());
}
);
四、 高级应用
1. 修改滚动速度
可以使用mouseWheelSpeed参数来修改用鼠标滚轮滚动时的速度，下面的代码将修改鼠标滚轮滑动时的滚动速度：
$('.scroll-pane').jScrollPane({
mouseWheelSpeed: 50
});
2. 滚动条自动隐藏
可以通过设置autoReinitialise和autoReinitialiseDelay两个参数，实现滚动条自动隐藏的功能。autoReinitialise参数表示是否自动隐藏滚动条，autoReinitialiseDelay表示多久后自动隐藏滚动条。下面的代码将实现当鼠标离开滚动区域时，滚动条隐藏，并在鼠标移入时重新显示滚动条：
$('.scroll-pane').jScrollPane({
autoReinitialise: true,
autoReinitialiseDelay: 500
});
3. 横向滚动条自动适应内容宽度
可以通过设置horizontalGutter参数为-16，实现横向滚动条自适应内容宽度的功能。下面的代码将实现当滚动内容的宽度小于滚动区域的宽度时，隐藏横向滚动条：
$('.scroll-pane').jScrollPane({
horizontalGutter: -16
});
如果你足够了解这个插件，那么你还可以使用API调用jScrollPane中的各种方法，实现更加灵活的滚动条定制化。
结语
本文介绍了jScrollPane插件的基本使用，如何定制化滚动条的外观，使用事件监听器以及如何实现一些高级应用。jScrollPane插件已经成为了优秀的jQuery插件，其精致的设计和丰富的功能极大的丰富了Web开发的工具箱。我们可以根据需要使用它自定义网页中的滚动条，这样做不仅可以提高用户体验，还可以让我们的项目更加独具特色。
