彈層蒙版（mask），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沒有問題，更老的手機不在咱們的兼容範圍內了。