jquery美化滚动条插件jscrollpane应用(转)

原文地址：http://www.jqcool.net/jquery-jscrollpane.html

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" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.8.2/jquery.min.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">
<p>
自从4月8日以来，再未探测到新的电子信号，这可能意味着为黑匣子记录仪定位探测器提供电能的电池，可能已经耗尽。这些电池仅能维持大约一个月，而这个期限已过。

　　当官员们确定不会再听到任何声音时，将派出潜水机器人。

　　澳大利亚总理阿博特12日说，针对马来西亚航空公司MH370航班的搜寻可能将持续相当长一段时间，原因是客机“黑匣子”发出的脉冲信号正在迅速减弱。

</p>

　　回龙观医院主任医师王健介绍，以往的突发事件中，家属主要集中在哀伤的情绪上，此次马航失联事件中，随着一些信息的不断证实和否定，家属出现一些焦虑的情绪。在事件的前三天，家属处于情绪惊吓期，陪伴和守护是精神科医生做得最多的事情，“我们更多的是给家属递杯水，送一些急救的药品，等他们稍微接受了我们，我们再慢慢坐下来聊，进行开导”。

　　王健表示，为方便马航失联乘客家属的心理救助，回龙观医院在3月份设立马航失联乘客家属心理门诊，为家属开辟绿色通道。王健建议，为家属尽快进入到情绪康复期，应不去看网上一些没有根据的不实信息，尽快平复心情、接纳自我，并在出现心理问题时主动同医生进行联系

                </p>
                <p>

　旷日持久黑匣子全都没电了

　　以人类目前的技术水平，水听器能够下降到数千米的海底尝试探测到飞行记录器超声波定位信标的信号，但定位信标在水下发出声波的范围却非常受限，大约在2000米。此外，配备侧扫声呐的小型潜艇也可以用于探寻飞机残骸，不过，这样的搜寻过程非常缓慢，大约每天50平方公里。因此，即便24小时不间断地搜寻，要想搜寻整个可能的海域是不切实际的，那将花费数十年的时间。

　　更为重要的是，在两次失事事件中，黑匣子最终都没电了。在此之后，搜索工作将变得非常困难。

　　此外，在搜寻任务上，两次事故最终确定的搜索范围都非常地大，法航AF447大约有1.7万平方公里，而且飞机坠毁的海域深度非常深，条件也非常苛刻。很多人都认为调查组永远找不到飞机了，马航MH370也是如此。

　　对比

　　不同点

　　线索太少法航即便看到残骸仍找2年

　　在大洋中寻机好比“在干草堆里寻针”。而目前看来，救援人员最需要的是“寻针”的线索。从法航的案例来看，AF447有很多关于失事地点的线索，而MH370却什么也没有。AF447有从卫星获得的最后已知位置的地点信息，最后也发现了漂浮的飞机残骸，而即便如此，调查组也花了2年时间才找到黑匣子。

　　最为关键的是，法航班机通过机上的飞机应答机获得了关键失事位置的信息。该系统在4分钟内自动发出了24条报告。这些线索信息都能够使得搜索人员能够在地图上划出一片“搜索区”。马航班机上装有该系统，但被人为关闭了。

　　应该看到，在搜寻法航客机上，大部分时间都花费在了规划上，法航调查组当年花费了10个星期的时间进行搜寻，而其中8个星期是在预演可能坠落区。

　　因此，确定搜寻范围是最为重要的事情，但是从MH370的案例来看，这非常困难，因为现在并没有任何的线索。

　　对比

　　搜救难度

　　马航更大搜救区域全球最恶劣

　　法航AF447着陆在了一处水下山脉的顶端，而且当时面临的气候和气流也非常复杂，但是海洋条件看起来并不是很苛刻，庆幸的是可以进行搜寻活动。

　　而马航MH370的坠毁范围海洋环境更复杂，甚至可能比地球上任何地方都苛刻。其“终结”的海域位于南印度洋的偏远地区，是全球最恶劣、最孤立的地区之一，盛行波涛骇浪。飞机很有可能已经沉入4500米深的海底，而那一区域的海底地形地貌还未被海洋学者们完全绘制出来。

　　此外，MH370的搜寻范围是AF447的3倍，而即便如此，这么大的范围还是飞机可能存在的区域。加上疑似区域的恶劣天气情况及海面情况，海浪甚至不能让搜寻队伍顺利打捞起可能的飞机残骸。
                </p>

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

);