jQuery轻量级滚动条插件JScrollPane

所属分类:UI-滚动

 36903  310  查看评论 (3)
分享到微信朋友圈
X
jQuery轻量级滚动条插件JScrollPane ie兼容6

JScrollPane

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)//滑动轨迹上的重复频率 
);
相关插件-滚动

fullpage平滑换页+css3酷炫导航

fullpage平滑换页+css3酷炫导航
  滚动
 38236  494

向下滚动加载动画特效插件AOS

向下滚动网页加载动画特效插件AOS
  滚动
 37252  435

新闻向下翻滚更新

新闻向下翻滚更新
  滚动
 35563  431

jQuery鼠标滚屏锚点定位

利用mousewheel库实现滚屏事件,同时支持侧边栏控制
  滚动
 32341  392

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    暖伤 0
    2017/6/30 14:36:11

    当有未来元素加载进来的时候,即使超出,也不出现滚动条,希望楼主完善一下(譬如动态加载ztree的树形结构的时候,即使超出也不出现滚动条)

        JoviChin0
        2017/10/9 10:35:42

        对的,同样是这个问题

        CREAK/p-)〓0
        2020/6/24 12:23:25
        这是个致命的问题,有解决方案吗?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复