Better-Scroll
btter-scroll是一个重点解决移动端(现已支持pc端) 各种滚动场景需求的插件。它的核心是借鉴的isscroll的实现。它的api设计兼容isscroll,在isscroll的基础上又扩展了一些特征以及做了一些性能优化。
better-scroll是基于原生js实现的，不依赖任何框架。
简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
#wrap{
/* 使用better-scroll时wrap必须有一个固定高度*/
/* width:300px;
height:80vh; */
width:100vw;
height:100vh;
border:1px solid #000;
/* 超出隐藏 */
overflow: hidden;
}
#list{
width:200%;
list-style: none;
/* overflow: hidden; */
}
#list li{
font:14px/30px "宋体";
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<!-- better-scroll默认滑动的是wrap下的第0个子元素 -->
<ul id="list">
</ul>
</div>
<script src="./btter-scroll.js"></script>
<script>
//给list添加内容
{
let wrap=document.querySelector('#wrap');
let bscroll=new BScroll(wrap)
let list=document.querySelector('#list');
list.innerHTML=[...(".".repeat(100))].map((item,index)=>{
return `<li>这是第${index}个li</li>`;
}).join("");
//每次重新生成dom元素后,刷新，保证滚动正常
bscroll.refresh(); //重新计算能否滚动
}
//添加better-scroll
{
let wrap=document.querySelector('#wrap');
// console.log(BScroll)
let bscroll=new BScroll(wrap,{
//配置项
startX:-10,
startY:-100,
scrollX:true, //可以横向滚动
tap:true, //派发移动端触摸事件 默认为false
// click:true, //派发原生的click事件
bounce:true //滑动回弹效果
});
let oLi=document.querySelector('#list li');
oLi.addEventListener('tap',function(e){
console.log(e)
})
}
</script>
</body>
</html>
效果图
