JScrollPane的使用
概述
jScrollPane.js是一个轻量级的滑块插件, 非常方便使用. 在前端工业界(写页面)使用非常广泛, 下面我记录下用法, 供以后开发时参考, 相信对其他人也有用.
PS: 想起之前我用impress.js写了一个PPT, 当时觉得有多了不起, 现在用的插件一多, 就觉得以前真是好笑, impress.js也就是一个一般的插件罢了...
不用jScrollPane.js
先来看看不用jScrollPane.js, 给一个wrap设定高度, 再给这个wrap加上内容, 内容的高度大于wrap的高度, 会发生什么?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scroller {
width: 240px;
height: 140px;
background-color: #666;
}
.app {
width: 240px;
height: 140px;
background-color: green;
}
<style>
</head>
<body>
<div class="scroller" style="">
<p>我知道我是一个没车没房得人，颜值还是那么低，也不说话。</p>
<p>我不敢靠近你，这就是理由</p>
<p>等到我靠近你，才发现我，喜欢上你了。</p>
<p> 等我想真正得追你得时候，才发现已经晚了</p>
<p>不知道还有没有机会，成为你得另一半了。</p>
<p>陪伴到老</p>
</div>
<div class="app"></div>
</body>
</html>
可以看到, scroller元素里面的内容超出了它的范围并且伸到外面去了.
使用overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scroller {
width: 240px;
height: 140px;
background-color: #666;
overflow: scroll;
}
.app {
width: 240px;
height: 140px;
background-color: green;
}
<style>
</head>
<body>
<div class="scroller" style="">
<p>我知道我是一个没车没房得人，颜值还是那么低，也不说话。</p>
<p>我不敢靠近你，这就是理由</p>
<p>等到我靠近你，才发现我，喜欢上你了。</p>
<p> 等我想真正得追你得时候，才发现已经晚了</p>
<p>不知道还有没有机会，成为你得另一半了。</p>
<p>陪伴到老</p>
</div>
<div class="app"></div>
</body>
</html>
可以看到, 只用css就给scroller元素加了一个滚动条, 不过这个滚动条是系统自带的滚动条. 如果要自定义滚动条的话, 可以使用jScrollPane.js.(注意, 需要和jquery一起使用.)
使用jScrollPane.js
<!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;
background-color: #666;
overflow: scroll;
}
.app {
width: 240px;
height: 140px;
background-color: green;
}
</style>
</head>
<body>
<div class="scroller" style="">
<p>我知道我是一个没车没房得人，颜值还是那么低，也不说话。</p>
<p>我不敢靠近你，这就是理由</p>
<p>等到我靠近你，才发现我，喜欢上你了。</p>
<p> 等我想真正得追你得时候，才发现已经晚了</p>
<p>不知道还有没有机会，成为你得另一半了。</p>
<p>陪伴到老</p>
</div>
<div class="app"></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>
可以看到,自定义了一个滚动条, jScrollPane还有许多其它的参数配置, 这些参数配置才是它真正的强大之处. 在此就不介绍了, 自行百度~
