彈層蒙版（mask），ios滾動穿透，我們專案的解決方案

defghy發表於2018-11-04
iOS穿透

問題描述

專案開發遇到一個ios獨有的問題，在wkwebview中穩定復現

問題： 彈出一個蒙版，當在蒙版上面滑動的時候蒙版後面的內容滾動了

這當然是ios的bug，但是經過我們測試iphone7也會復現這個問題，所以沒辦法需要相容。

百度了下好多思路

方法1： 直接禁用滾動容器的overflow，然後記錄scrollTop並恢復，這種方法不適合我們當前場景。

1. 浮層的入口有多個頁面
2. 浮層後面可滾動的容器有多個（3個）
3. 滾動容器有橫向和縱向滾動，很難記錄scrollTop和scrollLeft

方法2： 禁用touchmove事件，同樣會導致彈層容器無法滾動，很不幸我們的彈層需要能夠滾動。
方法3： 基於方法2，滾動容器使用better-scroll來滾動，這個基本可以解決問題，但是有better-scroll的主要問題，任何修改了layout都需要手動呼叫refresh不利於維護。

我們的方法

同樣基於方法2，我們執行以下2步

1. 浮層容器對touchmove禁用
2. 滾動容器對touchmove阻止其冒泡，
    判斷當前是否可以滾動（scrollHeight>offsetHeight），
    當可以滾動的時候不會觸發滾動穿透，因此
    1. 可以滾動：不禁用touchmove
    2. 不能滾動：禁用touchmove

程式碼:

// touchmoveFix.js
// ios滾動穿透問題解決指令
const touchFix = {
  bind: function (el, binding, vnode) {
    el.addEventListener(`touchmove`, (e) => {
      // 滾動容器阻止冒泡，因此是否prevent由當前函式決定
      e.stopPropagation();
      let scrollEl = e.currentTarget;
      // 判定當前滾動容器是否可以滾動
      if(scrollEl.scrollHeight <= scrollEl.offsetHeight) {
        // 不能滾動的時候依然需要阻止滾動穿透
        e.preventDefault();
      }
    }, false);
  }
};

// 使用指令
<!-- 彈層阻止touchmove -->
<section class="popup" @touchmove.prevent>
    ...
    <div class="content" v-touch-fix>...</div>
    ...
</section>

// js引入
import touchFix from `./touchmoveFix`;

export default {
  ...
  directives: {
    touchFix
  },
  ...
};

是否完美

可以看到思路並不複雜，無非是滾動子元素來決定是否禁用touchmove事件。
但是此方案並不完美，因為當彈出層有表單元素時，彈出鍵盤後表單本身一般需要可以滾動，此時滾動的是body元素，當touchmove禁用後body是無法滾動的，暫無解法只能暫時用方法1

總結：

此方案適用於彈層中有滾動容器，不適用於彈層本身為1個表單

經測試：iphone5s和android沒有問題，更老的手機不在我們的相容範圍內了。

相關文章