jScrollPane是一个设计非常灵活的跨浏览器的jQuery插件 ,它将浏览器的默认滚动条或是元素溢出时出现的滚动条映射成一个HTML结构,从而很容易地使用CSS来定义滚动的样式。下面来看下这个强大而灵活的jScrollPane的使用方法吧。
引入核心文件,为了更方便的使用,这里引入了mousewheel库
<!-- styles specific to demo site --> <link type="text/css" href="style/demo.css" rel="stylesheet" media="all" /> <!-- styles needed by jScrollPane - include in your own sites --> <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <!-- the styles for the lozenge theme --> <link type="text/css" href="style/jquery.jscrollpane.lozenge.css" rel="stylesheet" media="all" /> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <!-- the mousewheel plugin --> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <!-- the jScrollPane script --> <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
构建html
<div class="scroll-pane"> ....内容 </div>
写入JS
$(function() { $('.scroll-pane').jScrollPane(); });
$('.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)//滑动轨迹上的重复频率 );
当有未来元素加载进来的时候,即使超出,也不出现滚动条,希望楼主完善一下(譬如动态加载ztree的树形结构的时候,即使超出也不出现滚动条)