better-scroll.js——一款更好用的移動端滾動插件

今天給大家介紹一款很好用的移動端滾動插件：better-scroll.js，它真可以算得上是實至名歸，功能可謂是相當強大了。

我們先來看看它具體有哪些優勢吧。

① 原生。不依賴於任何庫或框架，完全基於原生 JS 實現。
② 輕量。編譯后的代碼大小是 63kb，壓縮后是 35kb，gzip 后僅有 9kb！
③ 強大。對於那些常規的滾動需求（如圖片輪播，局部文字滾動等）均可輕松滿足，完全可以媲美 Swiper.js 和 iScroll.js 等經典插件。

一、用法

1. 基礎用法

 

new BScroll(".wrapper");

或者

 

let wrapper = document.querySelector('.wrapper');
new BScroll(wrapper);

以上兩種方式都可以，其中wrapper為外層容器，而它只能有一個子元素。例如：

 

<div class="wrapper">
  <ul class="content">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <!-- 這里可以放一些其它的 DOM，但是會被忽略，且不會影響content部分滾動 -->
</div>

content元素就是滾動元素，它是wrapper的唯一子元素，且其高度必須大於wrapper的高度（若為橫向滾動則content寬度須大於wrapper寬度），否則無法滾動。

我們可以繼續看上面的例子，如果要實現一個最基本的滾動效果，還需要自己給它添加點樣式才行。

 

/*設置高度是為了讓content高度大於wrapper高度，否則無滾動效果*/
.wrapper{ height: 100px; overflow: hidden; background: #eee;}

 

 

這樣一個簡單的可滑動文字列表效果就出來了：

2. 進階用法

上面只是簡單講了 better-scroll.js 最基礎用法，無需任何配置即可使用。然鵝，很多情況下其實我們可能有其他各種類型滾動效果，如圖片輪播、整屏滾動、多屏多向切換等。

① 圖片輪播

說到圖片輪播，我們首先可能想到的就是經典的 Swiper.js，而事實上我們其實還可以使用更加輕量級的 better-scroll.js 來替代。例如：

 

<div class="wrapper">
    <ul class="content">
        <li><img src="./images/img1.jpg" alt=""></li>
        <li><img src="./images/img2.jpg" alt=""></li>
        <li><img src="./images/img3.jpg" alt=""></li>
    </ul>
</div>

 

.wrapper{ width: 600px; height: 320px; overflow: hidden;}
.content{ margin: 0; padding: 0; width: 1800px; overflow: hidden;}
.content li{ float: left; width: 600px; list-style: none;}
.content li img{ display: block; width: 100%;}

 

new BScroll('.wrapper', {
  scrollX: true,
  scrollY: false,
  snap: {  // 滑動切換的一些配置
    speed: 800,  // 滑動切換的速度
    easing: {  // 滑動切換的動畫效果
      style: 'ease-in'
    },
    threshold: 0.5,  // 滑動切換到超過一半時切換到下一屏
    stepX: 600,  // 橫向切換距離為輪播圖寬度
  }
});

 

 

實現效果如下：

可以看到，better-scroll.js 相對 Swiper.js 配置更加靈活，這是因為前者更加偏向於自由滑動，而后者更加偏重於輪播圖效果，如果你不想自己手寫樣式和這么細的滑塊配置的話，還是使用 Swiper.js 相對好一些。

② 整屏滾動

有了上面圖片輪播的案例，整屏滾動看起來就簡單了許多，因為 better-scroll.js 本身默認就是豎屏滾動，因此配置會更加簡潔。

 

<div class="wrapper">
    <ul class="content">
        <li>第一屏</li>
        <li>第二屏</li>
        <li>第三屏</li>
    </ul>
</div>

 

body{ margin: 0;}
.wrapper{ height: 100vh; overflow: hidden;}
.content{ margin: 0; padding: 0;}
.content li{ display: flex; justify-content: center; align-items: center; height: 100vh; list-style: none; font-size: 50px; font-weight: bold; color: #fff;}
.content li:nth-child(1){ background: #f00;}
.content li:nth-child(2){ background: #0f0;}
.content li:nth-child(3){ background: #00f;}

 

new BScroll('.wrapper', {
  snap: {  // 滑塊切換的一些配置
    threshold: 0.5,  // 滑動切換到超過一半時切換到下一屏
    stepY: window.innerHeight  // 縱向切換距離為窗口高度
  }
});

 

 

實現效果如下：

③ 多屏多向切換

這個切換方式可能比較少見，但是有時候確實可能需要實現這樣的效果。

 

<div id="app">
    <article class="container">
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
        <section class="section"></section>
    </article>
</div>

 

// Less代碼
body{ margin: 0;}
body,
#app{
  width: 100vw; height: 100vh; overflow: hidden;
}
.container{
  display: grid;
  width: 300vw;
  height: 300vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.section{
  height: 100vh;
}
.loop(@i) when (@i <= 9){
  .section:nth-of-type(@{i}){
    background: url("../images/puzzle_img@{i}.jpg") no-repeat center; background-size: cover;
  }
  .loop(@i+1);
}
.loop(1);

 

new BScroll('#app', {
  scrollX: true,
  bounce: false,
  snap: {
    threshold: 0.5,
    stepX: window.innerWidth,
    stepY: window.innerHeight
  }
});

 

 

實現效果如下：

需要注意上面css部分其實寫的是Less代碼，里面用到了樣式的循環，所以用Less等預編譯語言寫起來會輕松一些。

二、常見問題

1. 無法滾動

① 檢查內容長度是否比外層容器長度要長，這個在文章開頭有提過。
② 檢查配置是否正確，看看是不是把滾動禁用了。

2. 無法觸發點擊事件

better-scroll 默認會阻止瀏覽器的原生 click 事件，所以須添加以下配置：

 

click: true

3. 無法長按識別二維碼

這個是因為 better-scroll 會阻止瀏覽器的默認行為，比如頁面原生的滾動功能，當然也包括長按識別二維碼的功能，所以為了局部解除禁止，須添加以下配置：

 

preventDefaultException: {
  className: /^（此處填二維碼圖片的class屬性）$/
}

例如，有個二維碼圖片標簽如下：

 

<img class="qrcode" src="./images/qrcode.png" />

則相應的 better-scroll 配置為：

 

preventDefaultException: {
  className: /^qrcode$/
}

三、常用配置

為了方便使用，最后我給大家簡單總結了一份比較常用的 better-scroll 配置：

 

{
  click: true,  // 元素可觸發點擊事件
  scrollX: false,  // 橫向可滑動，默認為false
  scrollY: true,  // 縱向可滑動，默認為true
  bounce: false,  // 當滾動超過邊緣的時候無回彈動畫
  preventDefaultException: {  // 設置局部某元素原生事件不被禁止（默認preventDefault為true）
    className: 【正則表達式】
  },
  snap: {  // 滑動切換的一些配置
    speed: 800,  // 滑動切換的速度
    easing: {  // 滑動切換的動畫效果
      style: 'ease-in'
    },
    threshold: 0.5,  // 滑動切換到超過一半時切換到下一屏
    stepX: window.innerWidth,  // 橫向切換距離為窗口寬度
    stepY: window.innerHeight  // 縱向切換距離為窗口高度
  }
}

 

具體用法詳見→ https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/