當頁面內容的高度超過視口高度的時候，會出現縱向滾動條；當頁面內容的寬度超過視口寬度的時候，會出現橫向滾動條。也就是當我們的視口展示不下內容的時候，會通過滾動條的方式讓用戶滾動屏幕看到剩余的內容。
話說前面：
要注意的是，better-scroll 只處理容器（wrapper）的第一個子元素（content）的滾動，其它的元素都會被忽略。
1.下載 npm install better-scroll --save 2.使用： 需要先導入 import BScroll from 'better-scroll'
綠色部分為 wrapper，也就是父容器，它會有固定的高度。黃色部分為 content，它是父容器的第一個子元素，它的高度會隨着內容的大小而撐高。那么，當 content 的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器的高度，我們就可以滾動內容區了，這就是 better-scroll 的滾動原理。(官方的圖有個錯別字，wrapper)
// 1.創建BScroll對象
const bscroll = new BScroll(document.querySelector('.wrapper'),{
probeType:3, //0,1，2，3
click:true, //是否允許點擊，默認false
pullUpLoad:true //上拉加載更多,默認為false，不允許
})
默認情況下BScroll是不可以實時的監聽滾動位置的
probe 偵測
0,1 都是不偵測
2:在手指滾動的過程中偵測，手指離開后的慣性滾動過程中不偵測
3：只要是滾動，都偵測
關於pullUpLoad的基本使用 bscroll.on('pullingUp',() => { console.log('上拉加載更多') // 發送網絡請求，請求更多頁的數據 // 等數據請求完成，並且將新的數據展示出來后 setTimeout(() => { bscroll.finishPullUp() },2000) })
實際應用時， 還是要封裝
better-scroll 的初始化時機很重要，因為它在初始化的時候，會計算父元素和子元素的高度和寬度，來決定是否可以縱向和橫向滾動。因此，我們在初始化它的時候，必須確保父元素和子元素的內容已經正確渲染了。如果子元素或者父元素 DOM 結構發生改變的時候，必須重新調用 scroll.refresh() 方法重新計算來確保滾動效果的正常。所以同學們反饋的 better-scroll 不能滾動的原因多半是初始化 better-scroll 的時機不對，或者是當 DOM 結構發送變化的時候並沒有重新計算 better-scroll。
https://zhuanlan.zhihu.com/p/27407024知乎原貼