前言
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(
);