Better-Scroll
btter-scroll is a plug-in that focuses on solving the needs of various scrolling scenarios on the mobile side (now supports the pc side). Its core is the realization of isscroll for reference. Its api design is compatible with isscroll. On the basis of isscroll, some features are expanded and some performance optimizations are done.
better-scroll is based on native js and does not depend on any framework.
Simple to use
<!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>
Renderings
