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

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

由于它基于原生 JavaScript 實現(xiàn)，不依賴任何框架，所以既可以原生 JavaScript 引用，也可以與目前前端 MVVM 框架結(jié)合使用，比如，其官網(wǎng)上的示例就是與 Vue 的結(jié)合。

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

讓滾動更流暢

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

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

BetterScroll 的滾動體驗

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

可以發(fā)現(xiàn)，在增加慣性滾動，邊緣回彈等效果之后，明顯流暢、舒服了很多。那么，這些效果是怎么實現(xiàn)的呢？

慣性滾動

BetterScroll 在用戶滑動操作結(jié)束時，還會繼續(xù)慣性滾動一段。首先看一下源碼中的 BScroll.prototype._end 函數(shù)，這是 touchend、mouseup、touchcancel、mousecancel 事件的處理函數(shù)，也就是用戶滾動操作結(jié)束時的邏輯。

BScroll.prototype._end = function (e) {  ...  if (this.options.momentum && duration < this.options.momentumLimitTime && (absDistY > this.options.momentumLimitDistance || absDistX > this.options.momentumLimitDistance)) {   let momentumX = this.hasHorizontalScroll ? momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options)    : {destination: newX, duration: 0}   let momentumY = this.hasVerticalScroll ? momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options)    : {destination: newY, duration: 0}   newX = momentumX.destination   newY = momentumY.destination   time = Math.max(momentumX.duration, momentumY.duration)   this.isInTransition = 1  }  ...}

以上代碼的作用是，在用戶滑動操作結(jié)束時，如果需要開啟了慣性滾動，用 momentum 函數(shù)計算慣性滾動距離和時間。該函數(shù)，根據(jù)用戶滑動操作的速度和 deceleration選項 ——慣性減速來計算滾動距離，至于滾動時間，也是一個可配置的選項。

function momentum(current, start, time, lowerMargin, wrapperSize, options) {  ... let distance = current - start let speed = Math.abs(distance) / time ... let duration = swipeTime let destination = current + speed / deceleration * (distance < 0 ? -1 : 1) ...}