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

better-scroll 是基於原生 JS 實現的，不依賴任何框架，所以使用起來也十分的方便。它編譯後的程式碼大小是 63kb，壓縮後是 35kb，是一款非常輕量的 JS lib。

劃重點：

1. 使用時better-scroll是作用在外層的wrapper容器上的，滾動的部分是content---需要注意的是，better-scroll只處理容器的第一個子元素
   ，其他的元素會被忽略，如果裡面需要滾動的部分有好幾部分。一定要拿一個元素把他包裹起來
2. 還有就是better-scroll初始化了，但是沒法滾動。大家知道瀏覽器滾動的原理是頁面的高度超過視口高度的時候，才會出現滾動條。也就是說父容器一定要有一個固定的高度並且溢位隱藏，子容器的高度要大於父元素的高度，才能滾動
3. 滾動的原理

   1 element.style {
   2     transition-duration: 0ms;
   3     transform: translate(0px, 0px) scale(1) translateZ(0px);
   4     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    
   5 }

   通過滑動的距離動態改變translate的值來實現，讓它相對於父級移動，就有了一種滾動的效果，但是這裡就又有了下一個坑

4. 滾動元素裡面的某一塊元素的position：fixed失效,本來我們想實現一個效果是滾動到某一高度讓它有個吸頂效果，但是它死活吸不上去，實驗了幾次後發現它的fixed是相對於它的父容器定位的---（我想到的解決辦法是實時改變這個元素的top值，但是感覺不太流暢但是有效果）

   fixed定位的元素，如果父級有transform樣式，值不為none，那麼fixed定位就會失效，scale(),rotate()都會使fixed定位失效。

   解決方法：使用transform樣式的元素，不要包含fixed定位的子元素；css3的新屬性：flex;很好的解決了在transform下fixed失效的問題；也可以新增類和移除類

5. 使用下拉載入的時候，一定不能把包裹子元素的容器重新渲染，這樣滾動事件就會失效，因為你第一次初始化時給這個容器寫上樣式了，如果重新渲染的時候這些樣式就會被覆蓋，沒有樣式就不會滾動了，除非你再初始化一下這個容器，但是太麻煩不建議這樣使用
6. 當 DOM 結構發生變化的時候務必要呼叫refresh()確保滾動的效果正常，重新渲染高度