better-scroll：重點解決移動端各種滾動場景需求的插件

better-scroll 是什么

better-scroll 是一款重點解決移動端（未來可能會考慮 PC 端）各種滾動場景需求的插件。它的核心是借鑒的 iscroll 的實現，它的 API 設計基本兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優化。

better-scroll 是基于原生 JS 實現的，不依賴任何框架。它編譯后的代碼大小是 46kb，壓縮后是 26kb，gzip 后僅有 7kb，是一款非常輕量的 JS lib。

起步

學習使用 better-scroll 最好的方式是看它的 demo 代碼，我們把代碼都放在了 example 目錄。由于目前最適合移動端開發的前端 mvvm 框架是 Vue ，并且 better-scroll 可以很好的和 Vue 配合使用的，所以 demo 我都用 Vue 進行了重寫。

better-scroll 最常見的應用場景是列表滾動，我們來看一下它的 html 結構

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

上面的代碼中 better-scroll 是作用在外層 wrapper 容器上的，滾動的部分是 content 元素。這里要注意的是，better-scroll 只處理容器（wrapper）的第一個子元素（content）的滾動，其它的元素都會被忽略。

最簡單的初始化代碼如下：

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

better-scroll 提供了一個類，實例化的第一個參數是一個原生的 DOM 對象。當然，如果傳遞的是一個字符串，better-scroll 內部會嘗試調用 querySelector 去獲取這個 DOM 對象，所以初始化代碼也可以是這樣：

import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')

滾動原理

很多人已經用過 better-scroll，我收到反饋最多的問題是：

better-scroll 初始化了， 但是沒法滾動。

不能滾動是現象，我們得搞清楚這其中的根本原因。在這之前，我們先來看一下瀏覽器的滾動原理： 瀏覽器的滾動條大家都會遇到，當頁面內容的高度超過視口高度的時候，會出現縱向滾動條；當頁面內容的寬度超過視口寬度的時候，會出現橫向滾動條。也就是當我們的視口展示不下內容的時候，會通過滾動條的方式讓用戶滾動屏幕看到剩余的內容。

better-scroll 也是一樣的原理，我們可以用一張圖更直觀的感受一下：

綠色部分為 wrapper，也就是父容器，它會有 固定的高度 。黃色部分為 content，它是父容器的 第一個子元素 ，它的高度會隨著內容的大小而撐高。那么，當 content 的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器的高度，我們就可以滾動內容區了，這就是 better-scroll 的滾動原理。

文檔

訪問 better-scroll 官方文檔

demo

體驗地址