首先下載better-scroll插件，地址：https://github.com/ustbhuangyi/better-scrollhtml
（vue項目的話也能夠經過npm install better-scroll --save安裝）vue
引入bscroll.jsgit
而後經過new BScroll調用github
<!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，才能點擊事件。npm