jquery.jscrollpane.css
JScrollPane工作所必须的基本的CSS样式。
jquery.min.js
jQuery作为javascript库必须提前引入。
jquery.mousewheel.js
mouseweeljQuery插件是可选的，如果你需要使用鼠标滚轮滚动你的话需要引入。
默认的jScrollPane插件只能通过鼠标去拖动滚动条来实现内容的上下查看，但是添加了mousewheel之后，就可以实现用鼠标滚轮来滚动内容；
mwheelIntent.js
在滚动区域嵌套的情况下使用这个资源可以增强滚动的流畅度；
jquery.jscrollpane.min.js
JScrollPane的源文件必须引入！这是最终实现滚动效果的核心文件。
如何调用执行
|
1
2
3
4
|
$(function(){ $('.scroll-pane').jScrollPane();}); |
常用的参数配置项
1、showArrows：是否显示滚动箭头，模式是false；
2、maintainPosition：当滚动区重新初始化后，是否保持滚动条的原有位置，默认是true；
3、stickToBottom：当maintainPosition设置为true，且滚动区域到达底部，当有新内容添加的时候任然会固定在滚动区域底部，默认是false；
4、stickToRight：与stickToBottom属性原理类似，只是方向是右侧而不是底部；
5、autoReinitialise：自动初始化滚动区，内部实现机制实际上是一个定时器，当检测到内部有内容新增时，重新初始化，由于性能原因，默认false；
6、autoReinitialiseDelay：当autoReinitialise设置为true时，该属性表示自动初始化的延时，默认是500ms；
7、verticalDragMinHeight：垂直可拖动的最小高度，默认是0；
8、verticalDragMaxHeight：垂直可拖动的最大高度，默认是99999；
9、horizontalDragMinWidth：水平可拖动的最小距离，默认是0；
10、horizontalDragMaxWidth：水平可拖动的最大距离，默认是99999；
11、contentWidth：滚动区域的宽度，一般不要设置，该插件会根据内容实际宽度计算，默认undefined；
12、animateScroll：当调用scrollTo 或者scrollBy的时候，设置一个动画效果，包括时长duration和渐变ease，默认false；
13、animateDuration：动画时长，默认300ms；
14、animateEase：动画渐变函数，默认linear；
15、hijackInternalLinks：劫持锚链接，定位到滚动区域指定位置，默认false；
16、verticalGutter：垂直方向，内容和滚动条之间的距离，默认是4px；
17、horizontalGutter：水平方向，内容和滚动条之间的距离，默认是4px；
18、mouseWheelSpeed：鼠标滚轮的速度，默认是10px；
19、arrowButtonSpeed：方向按钮滚动内容的速度，默认是10px；
20、arrowRepeatFreq：按住方向按钮，内容滚动的频率，默认是100ms；
21、arrowScrollOnHover：当鼠标悬浮在方向按钮上时，是否允许滚动，默认false；
22、verticalArrowPositions：垂直方向按钮和固定点的位置，默认split；
23、horizontalArrowPositions：同上，水平方向；
24、enableKeyboardNavigation：是否允许键盘导航，默认true；
25、hideFocus：是否隐藏焦点框，默认false；
26、clickOnTrack：当点击固定点的时候，是否向相应方向滚动内容，默认true；
27、trackClickSpeed：点击固定点的滚动速度，默认是30px；
28、trackClickRepeatFreq：点击固定点的滚动频率，默认是100ms。
如果要修改滚动条的默认样式可以打开jquery.jscrollpane.css文件修改