每日技術總結：Better-scroll應用於彈出層內容滾動

一、Better-scroll在項目中的應用

Better-scroll這款滾動插件還是很好用的，通常不會有什么問題。但偶爾總會出點意外。今天再次使用better-scroll，記錄一下這次順利的過程，以防下次使用的時候出現意外。

1.需求

這是一個老項目，在商品詳情頁，點擊購買按鈕，會彈出一個協議，修改的需求是把協議彈層大小固定為一屏，協議的內容超出滾動。

效果如圖：

2.下載better-scroll並引入項目

（1）因為這是一個傳統開發的老項目，我想把插件下載下來引用。我上哪去下載better-scroll呢？去官網看看吧

　　方法一：打開better-scroll文檔，安裝-script加載，看看這里有沒有。這里提供了一個cdn地址https://unpkg.com/better-scroll@1.14.1/dist/bscroll.min.js，打開，把內容復制到本地項目中的文件，比如建個js文件，取名bscroll.min.js，

　　方法二：你也可以上github搜索這個插件的項目 ustbhuangyi/better-scroll，dist目錄下面也有bscroll.min.js，自行保存下來即可。

我是保存在項目的images/utils路徑下的

（2）在需要的頁面頭部引入bscroll.min.js

<script src="images/utils/bscroll.min.js"></script>

 

3.使用better-scroll

先上html結構代碼：

  <div class="agreement-pop" id="agreement-pop">
    <h4>協議</h4>
    <div class="content-bs-wrapper">
      <div class="content">
      </div>
    </div>
    <div class="btn-bar">
      <a class="btn-base disagree">不同意</a>
    </div>
  </div>

重點在content-bs-wrapper這里，其他的無關代碼就不講了。agreement-pop彈出層垂直居中等內容就不講了。這一篇的重點是滾動。

在需要使用滾動的商品詳情頁添加以下js代碼：

首先，定義一個全局變量用來保存滾動對象，初始化為null

    // 協議內容滾動容器對象初始化
    let agreenScroll = null;

在需要的地方實例化一個BScroll，我這里是在一個ajax異步請求的回調結果里面，拿到協議的內容后，設置滾動，先檢測下有沒有實例化過，添加以下代碼：

        // 獲取內容之后，檢測滾動對象實例化與否
        if (agreenScroll === null) {
          // 滾動對象未實例化，則進行實例化
          agreenScroll = new BScroll('.content-bs-wrapper', {
            scrollY: true, // 垂直滾動
            mouseWheel: true // 開啟滾輪滾動
          })
        } else {
          // 滾動對象已存在，則刷新
          agreenScroll.refresh();
        }

 

4.CSS是關鍵，Better-scroll的滾動原理是計算父子元素的高度，所以必須給父元素設置一個固定的高度，滾動才會生效。

.content-bs-wrapper {
    height: 400px;
    overflow: hidden;
}
.content{
}

外層agreement-pop垂直居中怎么做就不講了，用的是transform:translate(-50%,-50%).

關鍵給滾動容器的父元素定一個高度，並且超出隱藏。當內容超出時就會觸發滾動。

 

5.問題修復

我發現彈出層打開后，第一次用鼠標滾輪滾動的時候，滾動是無效的，這是為什么呢？

這是因為在彈出層彈出之前，彈出層所有的內容都是display:none，滾動容器是無高度的，所以better-scroll並沒有開啟滾動模式。

可以打印BScroll實例出來看下，打印代碼放在彈出層彈出代碼下面

      // 彈出層彈出
      $('.agreement-pop,.w-mask').show()
      console.log(agreenScroll)

hasVerticalScroll: false 表示垂直滾動未開啟

 

解決辦法：在彈出層彈出代碼下面，添加代碼刷新一下滾動對象，修改代碼如下：

      // 彈出層彈出
      $('.agreement-pop,.w-mask').show()
      agreenScroll.refresh(); // 彈出打開之后，刷新滾動對象
      console.log(agreenScroll) // 打印滾動對象

這時候，hasVerticalScroll: true 滾動就正常了，滾動對象打印的結果是：

 

注：當scrollerHeight大於wrapperHeight時，hasVerticalScroll為true，否則為false

 

（僅記錄工作中的問題）