better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。它的核心是借鑒的 iscroll 的實現，它的 API 設計基本兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優化。
better-scroll 是基於原生 JS 實現的，不依賴任何框架，所以使用起來也十分的方便。它編譯后的代碼大小是 63kb，壓縮后是 35kb，是一款非常輕量的 JS lib。
划重點：
- 使用時better-scroll是作用在外層的wrapper容器上的，滾動的部分是content---需要注意的是，better-scroll只處理容器的第一個子元素，其他的元素會被忽略，如果里面需要滾動的部分有好幾部分。一定要拿一個元素把他包裹起來
- 還有就是better-scroll初始化了，但是沒法滾動。大家知道瀏覽器滾動的原理是頁面的高度超過視口高度的時候，才會出現滾動條。也就是說父容器一定要有一個固定的高度並且溢出隱藏，子容器的高度要大於父元素的高度，才能滾動
- 滾動的原理
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的值來實現，讓它相對於父級移動，就有了一種滾動的效果，但是這里就又有了下一個坑
- 滾動元素里面的某一塊元素的position：fixed失效,本來我們想實現一個效果是滾動到某一高度讓它有個吸頂效果，但是它死活吸不上去，實驗了幾次后發現它的fixed是相對於它的父容器定位的---（我想到的解決辦法是實時改變這個元素的top值，但是感覺不太流暢但是有效果）
fixed定位的元素，如果父級有transform樣式，值不為none，那么fixed定位就會失效，scale(),rotate()都會使fixed定位失效。
解決方法：使用transform樣式的元素，不要包含fixed定位的子元素；css3的新屬性：flex;很好的解決了在transform下fixed失效的問題；也可以添加類和移除類
- 使用下拉加載的時候，一定不能把包裹子元素的容器重新渲染，這樣滾動事件就會失效，因為你第一次初始化時給這個容器寫上樣式了，如果重新渲染的時候這些樣式就會被覆蓋，沒有樣式就不會滾動了，除非你再初始化一下這個容器，但是太麻煩不建議這樣使用
- 當 DOM 結構發生變化的時候務必要調用refresh()確保滾動的效果正常，重新渲染高度