首先下載better-scroll插件，地址：https://github.com/ustbhuangyi/better-scroll
（vue項目的話也可以通過npm install better-scroll --save安裝）
引入bscroll.js
然后通過new BScroll調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .wrapper { height: 200px; background: red; overflow: hidden; font-size: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="content">
<div class="btn">按鈕</div>
<!--<button class="btn">anniu</button>-->
<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>分類列表</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>
<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>
</body>
<script src="bscroll.js"></script>
<script>
// probeType: 0,1都是不偵測實時位置，2是在手指滾動的過程中監測，手指離開后的慣性滾動過程不監測，3是只要滾動，都監測
let bscroll = new BScroll('.wrapper', { probeType: 3, click: true, //點擊
pullUpLoad: true //上拉加載更多
}) //監聽滾動位置 默認情況下BScroll 是不可以監聽滾動位置的，只有在初始化的時候設置了probeType才可以監聽
bscroll.on('scroll', function (position) { console.log(position) }) bscroll.on('pullingUp', function () { console.log('上拉加載更多'); //發送網絡請求，請求更多頁的數據
//等請求完成，進行數據展示
//調用finishiPullUp()表示本次上拉加載完成，可以進行下次上拉加載更多，不調用這個的話，默認只能由一次上拉加載更多
setTimeout(function () { bscroll.finishPullUp() },2000) }) //click事件
document.querySelector('.btn').addEventListener('click', function () { console.log('>>>>>>>>>>>') }) </script>
</html>
把要滾動的內容放在wrapper里面包裹起來，要給最外層的div一個固定高度，設置超出部分隱藏，overflow: hidden;只有當內容超過了最外層div的高度時才會滾動，最長用的就是監聽滾動位置，上拉加載更多，以及點擊事件，特別需要注意的是，點擊事件，BetterScroll 默認會阻止瀏覽器的原生 click 事件。當設置為 true，BetterScroll 會派發一個 click 事件，親測當點擊的元素是button時，並不會阻止點擊事件，但是當點擊的是div元素的時候，必須要設置click 為true，才能點擊事件。