滚动条美化Jquery插件jScrollPane参数配置与示例

发布时间:2020-08-21编辑:脚本学堂
分享下滚动条美化Jquery插件jScrollPane参数配置,以及jScrollPane插件的演示效果,掌握下jquery滚动条插件jScrollPane的具体用法。

动条美化的jquery插件jScrollPane
 
参数配置(用于设置jquery滚动条样式):
 

复制代码 代码示例:

$('.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)//滑动轨迹上的重复频率);
 

效果如下:
滚动条美化Jquery插件jScrollPane

附下载:滚动条美化Jquery插件jScrollPane