【前端库】jscrollpane.js 自定义滚动条

前言

jScrollPane是一个jQuery插件,它允许用HTML结构替换浏览器的默认滚动条(在具有溢出的元素上:auto),可以在css中自定义html。jScrollPane的设计灵活但非常易于使用。在您 下载并将相关文件包含在文档头部之后,您只需调用一个JavaScript函数来初始化滚动窗格。您可以使用CSS轻松设置结果滚动条的样式,或从现有主题中进行选择 。展示了jScrollPane的不同特性以及获得支持的多种方法,有许多不同的示例。

地址

cdn地址 :http://www.bootcdn.cn/jScrollPane/

官方网站: http://jscrollpane.kelvinluck.com/

GitHub地址:https://github.com/vitch/jScrollPane

安装

直接引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 4、必须,引入的样式表 -->
    <link href="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/style/jquery.jscrollpane.css" rel="stylesheet">
</head>
<body>
    <!-- 1、前提是必须得引入jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- 2、可选,引入鼠标滚动脚本 -->
    <script src="https://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
    <!-- 3、必须,引入要引入的脚本 -->
    <script src="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/script/jquery.jscrollpane.js"></script>
    <script type="text/javascript">

    </script>
</body>
</html>

构建工具

第一步:输入

npm install -g grunt-cli

第二步:进入build文件目录

cd build

第三步:输入

grunt

手册

属性及方法类型说明
showArrowsboolean(默认值:false) 。显示滑杆两边的箭头
maintainPositionboolean(默认值:true)。保持原位置
stickToBottomboolean(默认:false)。滑到底部
stickToRightboolean(默认:false)。滑到最右边
autoReinitialiseboolean(默认:false)。自动加载出现滑杆
autoReinitialiseDelayint(默认 500)//自动加载的时间延迟
verticalDragMinHeightint(默认 0)//垂直拖拽的最小高度
verticalDragMaxHeightint(默认 0 99999)//处置拖拽的最大高度
horizontalDragMinWidthint(默认 0)//水平拖拽的长度
horizontalDragMaxWidthint(默认 99999)//水平拖拽的最大长度
contentWidthint(默认 undefined)//内幕内用的宽度
animateScrollboolean(默认 false)//滚动动画
animateDurationint(默认 300)//动画延迟
animateEasestring(默认 ‘linear’)//动画轨迹
hijackInternalLinksboolean(默认 false)//截获内部链接
verticalGutterint(默认 4)//处置不掉长度
horizontalGutterint(默认 4)//水平不掉长度
mouseWheelSpeedint(默认 10)//鼠标疼速度
arrowButtonSpeedint(默认 10)//方向键按钮的速度
arrowRepeatFreqint(默认 100)//按钮事件重复频率
arrowScrollOnHoverboolean(默认 false)//接手鼠标在方向键上滑过的动作
verticalArrowPositionsstring[split或者before或者after或者os] (默认 split)//垂直方向上按钮的位置
horizontalArrowPositionsstring[split或者before或者after或者os] (默认 split)//水平方向上按钮的位置
enableKeyboardNavigationboolean(默认 true)//是否接受键盘操作
hideFocusboolean(默认 false)//隐藏焦点
clickOnTrackboolean(默认 true)//路径上点击操作
trackClickSpeedint(默认 30)//互动轨迹上的点击速度
trackClickRepeatFreqint(默认 100)//滑动轨迹上的重复频率

案例

这里自定义的很多东西,都是使用class类来控制话,那么自定义一些样式,比如加背景图片啊,自定义按钮图标啊,自定义背景颜色

基本使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <link href="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/style/jquery.jscrollpane.css" rel="stylesheet">
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .scroller {
        width: 240px;
        height: 140px;
        overflow: hidden;
    }
    </style>
  </head>
  <body>
    <!-- <div id="app"></div> -->
    <div class="scroller" style="">
        <p>我知道我是一个没车没房得人,颜值还是那么低,也不说话。</p>
        <p>我不敢靠近你,这就是理由</p>
        <p>等到我靠近你,才发现我,喜欢上你了。</p>
        <p> 等我想真正得追你得时候,才发现已经晚了</p>
        <p>不知道还有没有机会,成为你得另一半了。</p>
        <p>陪伴到老</p>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/script/jquery.jscrollpane.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.scroller').jScrollPane();
        });
    </script>
  </body>
</html>

按照上面得方法来写

showArrows

滚动条两边

$('.scroll-pane').jScrollPane(

);

更新中

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值