BetterScroll 是一款重點解決移動端各種滾動場景需求的開源外掛（GitHub地址），適用於滾動列表、選擇器、輪播圖、索引列表、開屏引導等應用場景。

為了滿足這些場景，它不僅支援慣性滾動、邊界回彈、滾動條淡入淡出等效果的靈活配置，讓滾動更加流暢，同時還提供了很多 API 方法和事件，以便我們更快地實現滾動場景下的需求，如下拉重新整理、上拉載入。

由於它基於原生 JavaScript 實現，不依賴任何框架，所以既可以原生 JavaScript 引用，也可以與目前前端 MVVM 框架結合使用，比如，其官網上的示例就是與 Vue 的結合。

首先，讓我們來看一下它是怎樣讓滾動更流暢的吧。

讓滾動更流暢

在移動端，如果你使用過 overflow: scroll 生成一個滾動容器，會發現它的滾動是比較卡頓，呆滯的。為什麼會出現這種情況呢？

因為我們早已習慣了目前的主流作業系統和瀏覽器視窗的滾動體驗，比如滾動到邊緣會有回彈，手指停止滑動以後還會按慣性繼續滾動一會，手指快速滑動時頁面也會快速滾動。而這種原生滾動容器卻沒有，就會讓人感到卡頓。

BetterScroll 的滾動體驗

試一試 BetterScroll 的滾動體驗吧。體驗地址

可以發現，在增加慣性滾動，邊緣回彈等效果之後，明顯流暢、舒服了很多。那麼，這些效果是怎麼實現的呢？

慣性滾動

BetterScroll 在使用者滑動操作結束時，還會繼續慣性滾動一段。首先看一下原始碼中的 BScroll.prototype._end 函式，這是 touchend、mouseup、touchcancel、mousecancel 事件的處理函式，也就是使用者滾動操作結束時的邏輯。

以上程式碼的作用是，在使用者滑動操作結束時，如果需要開啟了慣性滾動，用 momentum 函式計算慣性滾動距離和時間。該函式，根據使用者滑動操作的速度和 deceleration選項 ——慣性減速來計算滾動距離，至於滾動時間，也是一個可配置的選項。

邊緣回彈

超過邊緣時的回彈，有兩個處理步驟，第一步是滾動到超過邊界時速度要變慢，第二步是回彈到邊界。其中，第一步是在原始碼的 BScroll.prototype._move 函式，這是 touchmove 和 mousemove 事件的處理函式，也就是在使用者滑動操作過程中的邏輯。