一、什麼是better-scroll

better-scroll 是一款重點解決移動端（已支援 PC）各種滾動場景需求的外掛

#滾動原理

1. 與瀏覽器滾動原理一致，父容器高度固定，子元素內容撐開，必須產生滾動條，才能滾動。
2. better-scroll只處理容器（wrapper）的第一個子元素（content）的滾動

#二、如何使用

1.載入外掛

2.HTML內容

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 這裡可以放一些其它的 DOM，但不會影響滾動 -->
</div>
 

3.初始化呼叫BScroll

 var BScroll = new BScroll('.wrapper',{}); 

#三、better-scroll常見屬性

#scrollX

型別：Boolean
預設值: false
作用：當設定為 true 的時候，可以開啟橫向滾動。

#scrollY

型別：Boolean
預設值：true
作用：當設定為 true 的時候，可以開啟縱向滾動

#probeType

型別: Number
預設值:0
作用:
1  滾動一段時間後在去派發scroll事件
2  只要滾動會實時的派發scroll事件
3  不僅在滾動實時的派發scroll事件，並且在滾動動畫的時候也會派發scroll事件
 

#四、better-scroll常見方法

#bs.refresh()

重新計算 better-scroll，當 DOM 結構發生變化的時候務必要呼叫確保滾動的效果正常

#bs.scrollToElement(el, time, offsetX, offsetY, easing)

引數：
{DOM | String} el 滾動到的目標元素, 如果是字串，則內部會嘗試呼叫 querySelector 轉換成 DOM 物件。
{Number} time 滾動動畫執行的時長（單位 ms）
{Number | Boolean} offsetX 相對於目標元素的橫軸偏移量，如果設定為 true，則滾到目標元素的中心位置
{Number | Boolean} offsetY 相對於目標元素的縱軸偏移量，如果設定為 true，則滾到目標元素的中心位置
返回值：無
作用：滾動到指定的目標元素。
 

#bs.on();

 bs.on("scroll",function(){
    console.log(this.y);//滾動的距離  下拉是正值(拉的距離越大值越大)  上拉是負值
    this.maxScrollY//最大的滾動距離
})