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

最新推荐文章于 2024-04-18 09:49:47 发布

搬砖老程

最新推荐文章于 2024-04-18 09:49:47 发布

阅读量3.7k

点赞数 1

分类专栏：库酷前端文章标签： js jquery 插件 jscrollpane 自定义滚动条

本文链接：https://blog.csdn.net/weixin_41000111/article/details/79504986

版权

前端同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

库酷

7 篇文章 1 订阅

订阅专栏

前言

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

手册

属性及方法	类型	说明
showArrows	boolean	(默认值：false) 。显示滑杆两边的箭头
maintainPosition	boolean	(默认值：true)。保持原位置
stickToBottom	boolean	(默认：false)。滑到底部
stickToRight	boolean	(默认：false)。滑到最右边
autoReinitialise	boolean	(默认：false)。自动加载出现滑杆
autoReinitialiseDelay	int	(默认 500)//自动加载的时间延迟
verticalDragMinHeight	int	(默认 0)//垂直拖拽的最小高度
verticalDragMaxHeight	int	(默认 0 99999)//处置拖拽的最大高度
horizontalDragMinWidth	int	(默认 0)//水平拖拽的长度
horizontalDragMaxWidth	int	(默认 99999)//水平拖拽的最大长度
contentWidth	int	(默认 undefined)//内幕内用的宽度
animateScroll	boolean	(默认 false)//滚动动画
animateDuration	int	(默认 300)//动画延迟
animateEase	string	(默认 ‘linear’)//动画轨迹
hijackInternalLinks	boolean	(默认 false)//截获内部链接
verticalGutter	int	(默认 4)//处置不掉长度
horizontalGutter	int	(默认 4)//水平不掉长度
mouseWheelSpeed	int	(默认 10)//鼠标疼速度
arrowButtonSpeed	int	(默认 10)//方向键按钮的速度
arrowRepeatFreq	int	(默认 100)//按钮事件重复频率
arrowScrollOnHover	boolean	(默认 false)//接手鼠标在方向键上滑过的动作
verticalArrowPositions	string	[split或者before或者after或者os] (默认 split)//垂直方向上按钮的位置
horizontalArrowPositions	string	[split或者before或者after或者os] (默认 split)//水平方向上按钮的位置
enableKeyboardNavigation	boolean	(默认 true)//是否接受键盘操作
hideFocus	boolean	(默认 false)//隐藏焦点
clickOnTrack	boolean	(默认 true)//路径上点击操作
trackClickSpeed	int	(默认 30)//互动轨迹上的点击速度
trackClickRepeatFreq	int	(默认 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
评论
【前端库】jscrollpane.js 自定义滚动条

前言 jScrollPane是一个jQuery插件，它允许用HTML结构替换浏览器的默认滚动条（在具有溢出的元素上：auto），可以在css中自定义html。jScrollPane的设计灵活但非常易于使用。在您下载并将相关文件包含在文档头部之后，您只需调用一个JavaScript函数来初始化滚动窗格。您可以使用CSS轻松设置结果滚动条的样式，或从现有主题中进行选择。展示了jScroll...
复制链接

扫一扫