jscrollpane自定义滚动条用法,jscrollpane滚动条美化插件使用方法——转

前端开发者面对不同浏览器对滚动条渲染的差异，可以使用jScrollPane这款JQuery插件解决，jScrollPane在模拟浏览器滚动条技术中显示出了强大的优越性。

jScrollPane这个jQuery插件可以让你通过简单的CSS设置就能够替换所有分块元素在浏览器中默认的垂直滚动条样式。

http://jscrollpane.kelvinluck.com/这是这款插件的官方下载地址。

我们需要下载下面几个资源。

1、jquery.jscrollpane.css：这是基本的滚动条样式表；

2、jquery.js：jScrollPane依赖JQuery库，可以去JQuery官网下载或者直接使用CDN地址；

3、jquery.mousewheel.js：默认的jScrollPane插件只能通过鼠标去拖动滚动条来实现内容的上下查看，但是添加了这个资源的引用之后，就可以实现用鼠标滚轮来滚动内容；

4、mwheelIntent.js：在滚动区域嵌套的情况下使用这个资源可以增强滚动的流畅度；

5、jquery.jscrollpane.min.js：这是最终实现滚动效果的核心文件。

jScrollPane参数选项大全

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

$('.scroll-pane').jScrollPane(     showArrows - boolean (default false)//显示滑杆两边的箭头        maintainPosition - boolean (default true)//保持原位置        stickToBottom- boolean (default false)//滑到底部        stickToRight- boolean (default false)//湖大道最右边        autoReinitialise - boolean (default false)//自动加载出现滑杆        autoReinitialiseDelay - int (default 500)//自动加载的时间延迟        verticalDragMinHeight - int (default 0)//垂直拖拽的最小高度        verticalDragMaxHeight - int (default 99999)//处置拖拽的最大高度        horizontalDragMinWidth - int (default 0)//水平拖拽的长度        horizontalDragMaxWidth - int (default 99999)//水平拖拽的最大长度        contentWidth - int (default undefined)//内幕内用的宽度        animateScroll - boolean (default false)//滚动动画        animateDuration - int (default 300)//动画延迟        animateEase - string (default 'linear')//动画轨迹        hijackInternalLinks - boolean (default false)//截获内部链接        verticalGutter - int (default 4)//处置不掉长度        horizontalGutter - int (default 4)//水平不掉长度        mouseWheelSpeed - int (default 10)//鼠标疼速度        arrowButtonSpeed - int (default 10)//方向键按钮的速度        arrowRepeatFreq - int (default 100)//按钮事件重复频率        arrowScrollOnHover - boolean (default false)//接手鼠标在方向键上滑过的动作        verticalArrowPositions - string [split|before|after|os] (default split)//垂直方向上按钮的位置        horizontalArrowPositions - string [split|before|after|os] (default split)//水平方向上按钮的位置        enableKeyboardNavigation - boolean (default true)//是否接受键盘操作        hideFocus - boolean (default false)//隐藏焦点        clickOnTrack - boolean (default true)//路径上点击操作        trackClickSpeed - int (default 30)//互动轨迹上的点击速度        trackClickRepeatFreq - int (default 100)//滑动轨迹上的重复频率    );

 

 

转载请注明：jscrollpane自定义滚动条用法,jscrollpane滚动条美化插件使用方法 - 前端开发