better-scroll是最接近与原生的滚动插件,兼容pc和移动端,示例和文档请移步官网地址。
一、BScroll纵向滚动
1.示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<title>BScroll纵向滚动</title>
<script type="text/javascript">
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
position: absolute;;
width: 100%;
top: 50px;
left: 0px;
bottom: 50px;
overflow: hidden;
}
.top{
position: fixed;
top: 0;
height: 50px;
width: 100%;
left: 0;
background-color: #000000;
}
.bottom{
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
left: 0;
background-color: #000000;
}
.content li{
margin: 0 0.2rem;
height: .8rem;
line-height: .8rem;
padding: 0 .4rem;
border-bottom: 1px solid #ccc;
font-size: 0.30rem;
}
/* 下拉、上拉提示信息 */
.top-tip{
position: absolute;
top: -40px;
left: 0;
z-index: 1;
width: 100%;
height:40px;
line-height:40px;
text-align:center;
color: #555;
font-size: 0.30rem;
}
.bottom-tip{
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
color: #777;
background: #f2f2f2;
position: absolute;
bottom: -35px;
left: 0;
font-size: 0.30rem;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="wrap">
<div class="content">
<!-- 刷新提示信息 -->
<div class="top-tip">
<span class="refresh-hook">下拉刷新</span>
</div>
<ul class="list">
<li onclick="clickli(event)">列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
</ul>
<!-- 底部提示信息 -->
<div class="bottom-tip">
<span class="loading-hook">加载更多</span>
</div>
</div>
</div>
<div class="bottom"></div>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bscroll.min.js"></script>
<script>
$(function(){
var wrapper = document.querySelector('.wrap')
var myScroll = new BScroll(wrapper, {
scrollY: true,
probeType:3,
pullDownRefresh: {
threshold: 50,
probeType: 3
},
pullUpLoad: {
threshold: 50
},
click:true
});
//下拉刷新动作触发事件
myScroll.on('pullingDown', (e)=>{
console.log('pullingDown')
// myScroll.refresh()
myScroll.finishPullDown() // 下拉刷新动作完成后调用此方法告诉BScroll完成一次下拉动作
});
//上拉加载
myScroll.on('pullingUp', (e)=>{
console.log('pullingUp')
//myScroll.refresh() // DOM 结构发生变化后,重新初始化BScroll
myScroll.finishPullUp() // 上拉加载动作完成后调用此方法告诉BScroll完成一次上拉动作
});
// 滑动过程中事件
myScroll.on('scroll',(pos)=>{
console.log(-pos.y,myScroll.maxScrollY)
if(pos.y > 40){
$(".refresh-hook").html('释放立即刷新');
}else{
$(".refresh-hook").html('下拉刷新');
}
if(pos.y<myScroll.maxScrollY-40){
$(".loading-hook").html('加载中...');
}else{
$(".loading-hook").html('加载更多');
}
});
});
function clickli(e){
console.log(e,e._constructed)//我们会给派发的 event 参数加一个私有属性 _constructed,值为 true
}
</script>
</body>
</html>
2.截图
二、BScroll横向滚动
1.示例代码
注意:BScroll横向滚动必须计算要滚动容器的宽度,纵向滚动不需要计算。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<title>BScroll横向滚动</title>
<script type="text/javascript">
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.wrap{
position: absolute;;
width: 100%;
top: 50px;
left: 0px;
bottom: 50px;
overflow: hidden;
}
.top{
position: fixed;
top: 0;
height: 50px;
width: 100%;
left: 0;
background-color: #000000;
}
.bottom{
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
left: 0;
background-color: #000000;
}
.content{
height: 1rem;
overflow: hidden;
white-space: nowrap;
}
.list{
height: 1rem;
}
.content li{
margin: 0 10px 0 0;
height: .8rem;
line-height: .8rem;
border-bottom: 1px solid #ccc;
font-size: 0.30rem;
width: 50px;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="wrap">
<div class="content">
<ul class="list">
<li onclick="clickli(event)">列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
</ul>
</div>
</div>
<div class="bottom"></div>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bscroll.min.js"></script>
<script>
$(function(){
var wrapper = document.querySelector('.wrap');
var liCount=$(".list").find("li").size();
$(".content").width(liCount*50+liCount*10);
var myScroll = new BScroll(wrapper, {
scrollY: false,
probeType:3,
scrollX:true,
click:true
});
// 滑动过程中事件
myScroll.on('scroll',(pos)=>{
console.log(pos,myScroll.maxScrollX)
});
});
function clickli(e){
console.log(e,e._constructed)//我们会给派发的 event 参数加一个私有属性 _constructed,值为 true
}
</script>
</body>
</html>
2.截图
三、BScroll滚动联动
1.示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<title>BScroll滚动联动</title>
<script type="text/javascript">
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
.top {
position: fixed;
top: 0;
height: 1rem;
line-height: 1rem;
width: 100%;
left: 0;
background-color: #000000;
color: #fff;
font-weight: bold;
font-size: 0.32rem;
text-align: center;
}
.bottom {
position: fixed;
bottom: 0;
height: 1rem;
line-height: 1rem;
width: 100%;
left: 0;
background-color: #000000;
color: #fff;
font-weight: bold;
font-size: 0.32rem;
text-align: center;
}
/*Y轴*/
.wrapY {
position: absolute;
;
width: 100%;
top: 1.8rem;
left: 0px;
bottom: 50px;
overflow: hidden;
}
.wrapY .content li {
margin: 0 0.2rem;
height: .8rem;
line-height: .8rem;
padding: 0 .4rem;
border-bottom: 1px solid #ccc;
font-size: 0.30rem;
}
/* 下拉、上拉提示信息 */
.top-tip {
position: absolute;
top: -40px;
left: 0;
z-index: 1;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
color: #555;
font-size: 0.30rem;
}
.bottom-tip {
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
color: #777;
position: absolute;
bottom: -35px;
left: 0;
font-size: 0.30rem;
}
/*X轴*/
.wrapX {
position: absolute;
;
width: 100%;
top: 1rem;
left: 0px;
height: 0.8rem;
overflow: hidden;
background-color: #009eff;
}
.wrapX .content {
height: 0.8rem;
}
.wrapX .list {
height: 0.8rem;
}
.wrapX .content li {
height: .8rem;
line-height: .8rem;
font-size: 0.30rem;
width: 1.2rem;
float: left;
text-align: center;
color: #fff;
}
.navActive {
color: rgb(255, 145, 4) !important;
font-size: 0.32rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="top">头部</div>
<div class="wrapX">
<div class="content">
<ul class="list">
<li onclick="clickliX(event,this)" class="navActive">导航0</li>
<li onclick="clickliX(event,this)">导航1</li>
<li onclick="clickliX(event,this)">导航2</li>
<li onclick="clickliX(event,this)">导航3</li>
<li onclick="clickliX(event,this)">导航4</li>
<li onclick="clickliX(event,this)">导航5</li>
<li onclick="clickliX(event,this)">导航6</li>
<li onclick="clickliX(event,this)">导航7</li>
<li onclick="clickliX(event,this)">导航8</li>
<li onclick="clickliX(event,this)">导航9</li>
<li onclick="clickliX(event,this)">导航10</li>
<li onclick="clickliX(event,this)">导航11</li>
<li onclick="clickliX(event,this)">导航12</li>
<li onclick="clickliX(event,this)">导航13</li>
<li onclick="clickliX(event,this)">导航14</li>
<li onclick="clickliX(event,this)">导航15</li>
<li onclick="clickliX(event,this)">导航16</li>
<li onclick="clickliX(event,this)">导航17</li>
<li onclick="clickliX(event,this)">导航18</li>
<li onclick="clickliX(event,this)">导航19</li>
<li onclick="clickliX(event,this)">导航20</li>
<li onclick="clickliX(event,this)">导航21</li>
<li onclick="clickliX(event,this)">导航22</li>
<li onclick="clickliX(event,this)">导航23</li>
<li onclick="clickliX(event,this)">导航24</li>
<li onclick="clickliX(event,this)">导航25</li>
<li onclick="clickliX(event,this)">导航26</li>
<li onclick="clickliX(event,this)">导航27</li>
<li onclick="clickliX(event,this)">导航28</li>
<li onclick="clickliX(event,this)">导航29</li>
<li onclick="clickliX(event,this)">导航30</li>
<li onclick="clickliX(event,this)">导航31</li>
<li onclick="clickliX(event,this)">导航32</li>
</ul>
</div>
</div>
<div class="wrapY">
<div class="content">
<!-- 刷新提示信息 -->
<div class="top-tip">
<span class="refresh-hook">下拉刷新</span>
</div>
<ul class="list">
<li onclick="clickliY(event,this)">列表0</li>
<li onclick="clickliY(event,this)">列表1</li>
<li onclick="clickliY(event,this)">列表2</li>
<li onclick="clickliY(event,this)">列表3</li>
<li onclick="clickliY(event,this)">列表4</li>
<li onclick="clickliY(event,this)">列表5</li>
<li onclick="clickliY(event,this)">列表6</li>
<li onclick="clickliY(event,this)">列表7</li>
<li onclick="clickliY(event,this)">列表8</li>
<li onclick="clickliY(event,this)">列表9</li>
<li onclick="clickliY(event,this)">列表10</li>
<li onclick="clickliY(event,this)">列表11</li>
<li onclick="clickliY(event,this)">列表12</li>
<li onclick="clickliY(event,this)">列表13</li>
<li onclick="clickliY(event,this)">列表14</li>
<li onclick="clickliY(event,this)">列表15</li>
<li onclick="clickliY(event,this)">列表16</li>
<li onclick="clickliY(event,this)">列表17</li>
<li onclick="clickliY(event,this)">列表18</li>
<li onclick="clickliY(event,this)">列表19</li>
<li onclick="clickliY(event,this)">列表20</li>
<li onclick="clickliY(event,this)">列表21</li>
<li onclick="clickliY(event,this)">列表22</li>
<li onclick="clickliY(event,this)">列表23</li>
<li onclick="clickliY(event,this)">列表24</li>
<li onclick="clickliY(event,this)">列表25</li>
<li onclick="clickliY(event,this)">列表26</li>
<li onclick="clickliY(event,this)">列表27</li>
<li onclick="clickliY(event,this)">列表28</li>
<li onclick="clickliY(event,this)">列表29</li>
<li onclick="clickliY(event,this)">列表30</li>
<li onclick="clickliY(event,this)">列表31</li>
<li onclick="clickliY(event,this)">列表32</li>
</ul>
<!-- 底部提示信息 -->
<div class="bottom-tip">
<span class="loading-hook">加载更多</span>
</div>
</div>
</div>
<div class="bottom">底部</div>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bscroll.min.js"></script>
<script>
var myScrollY = null;
var myScrollX = null;
$(function() {
var wrapperY = document.querySelector('.wrapY')
myScrollY = new BScroll(wrapperY, {
scrollY: true,
probeType: 3,
click: true
});
var wrapperX = document.querySelector('.wrapX');
var htmlFontSize = parseFloat($("html").css("font-size"));
var liCount = $(".wrapX .list").find("li").size();
$(".wrapX .content").width(liCount * htmlFontSize * 1.2);
myScrollX = new BScroll(wrapperX, {
scrollY: false,
probeType: 3,
scrollX: true,
click: true
});
});
function clickliY(e,t) {
var _index=$(t).index();
console.log(e, e._constructed) //我们会给派发的 event 参数加一个私有属性 _constructed,值为 true
if(e._constructed) {
$(".wrapX li").removeClass("navActive");
$(".wrapX li").eq(_index).addClass("navActive");
// 滚动到指定的目标元素
myScrollX.scrollToElement($(".wrapX li").eq(_index).get(0), 200, true);
myScrollY.scrollToElement($(".wrapY li").eq(_index).get(0),200);
}
}
function clickliX(e, t) {
console.log(e, e._constructed) //我们会给派发的 event 参数加一个私有属性 _constructed,值为 true
if(e._constructed) {
$(".wrapX li").removeClass("navActive");
$(t).addClass("navActive");
var _index=$(t).index();
// 滚动到指定的目标元素
myScrollX.scrollToElement($(t).get(0), 200, true);
myScrollY.scrollToElement($(".wrapY li").eq(_index).get(0),200);
}
}
</script>
</body>
</html>
2.截图