前端滾動插件：better-scroll

better-scroll 是什麼

better-scroll 是一款重點解決移動端（已支援 PC）各種滾動場景需求的插件。它的核心是借鑒的 iscroll 的實作，它的 API 設計基本相容 iscroll，在 iscroll 的基礎上又擴充了一些 feature 以及做了一些性能優化。

better-scroll 是基于原生 JS 實作的，不依賴任何架構。它編譯後的代碼大小是 63kb，壓縮後是 35kb，gzip 後僅有 9kb，是一款非常輕量的 JS lib。

官方文檔寫得很詳細

點選這裡立刻傳送到better-scroll開發文檔

以下是better-scroll的API

方法 / 通用

better-scroll 提供了很多靈活的 API，當我們基于 better-scroll 去實作一些 feature 的時候，會用到這些 API，了解他們會有助于開發更加複雜的需求。

refresh()

參數：無

傳回值：無

作用：重新計算 better-scroll，當 DOM 結構發生變化的時候務必要調用確定滾動的效果正常。

scrollTo(x, y, time, easing)

參數：

• {Number} x 橫軸坐标（機關 px）
• {Number} y 縱軸坐标（機關 px）
• {Number} time 滾動動畫執行的時長（機關 ms）
• {Object} easing 緩動函數，一般不建議修改，如果想修改，參考源碼中的 ease.js 裡的寫法

傳回值：無

作用：滾動到指定的位置，見 Demo 。

scrollBy(x, y, time, easing)

參數：

• {Number} x 橫軸距離（機關 px）
• {Number} y 縱軸距離（機關 px）
• {Number} time 滾動動畫執行的時長（機關 ms）
• {Object} easing 緩動函數，一般不建議修改，如果想修改，參考源碼中的 ease.js 裡的寫法

傳回值：無

作用：相對于目前位置偏移滾動 x,y 的距離。

scrollToElement(el, time, offsetX, offsetY, easing)

參數：

• {DOM | String} el 滾動到的目标元素, 如果是字元串，則内部會嘗試調用 querySelector 轉換成 DOM 對象。
• {Number} time 滾動動畫執行的時長（機關 ms）
• {Number | Boolean} offsetX 相對于目标元素的橫軸偏移量，如果設定為 true，則滾到目标元素的中心位置
• {Number | Boolean} offsetY 相對于目标元素的縱軸偏移量，如果設定為 true，則滾到目标元素的中心位置
• {Object} easing 緩動函數，一般不建議修改，如果想修改，參考源碼中的 ease.js 裡的寫法

傳回值：無

作用：滾動到指定的目标元素。

stop()

參數：無

傳回值：無

作用：立即停止目前運作的滾動動畫。

enable()

參數：無

傳回值：無

作用：啟用 better-scroll, 預設 開啟。

disable()

參數：無

傳回值：無

作用：禁用 better-scroll，DOM 事件（如 touchstart、touchmove、touchend）的回調函數不再響應。

destroy()

參數：無

傳回值：無

作用：銷毀 better-scroll，解綁事件。