問題描述

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

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

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

vue 彈框產生的滾動穿透問題

百度了下好多思路

方法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. 可以滾動：不禁用touchmove2. 不能滾動：禁用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沒有問題，更老的手機不在我們的兼容范圍內了。

原文地址：https://segmentfault.com/a/1190000016900193

轉載于:https://www.cnblogs.com/lalalagq/p/9916981.html

總結

以上是生活随笔為你收集整理的弹层蒙版（mask），ios滚动穿透，我们项目的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。