問題描述

項目開發(fā)遇到一個ios獨有的問題，在wkwebview中穩(wěn)定復(fù)現(xiàn)

問題： 彈出一個蒙版，當(dāng)在蒙版上面滑動的時候蒙版后面的內(nèi)容滾動了

這當(dāng)然是ios的bug，但是經(jīng)過我們測試iphone7也會復(fù)現(xiàn)這個問題，所以沒辦法需要兼容。

vue 彈框產(chǎn)生的滾動穿透問題

百度了下好多思路

方法1： 直接禁用滾動容器的overflow，然后記錄scrollTop并恢復(fù)，這種方法不適合我們當(dāng)前場景。

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

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

我們的方法

同樣基于方法2，我們執(zhí)行以下2步

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

代碼:

// touchmoveFix.js // ios滾動穿透問題解決指令 const touchFix = {bind: function (el, binding, vnode) {el.addEventListener('touchmove', (e) => {// 滾動容器阻止冒泡，因此是否prevent由當(dāng)前函數(shù)決定e.stopPropagation();let scrollEl = e.currentTarget;// 判定當(dāng)前滾動容器是否可以滾動if(scrollEl.scrollHeight <= scrollEl.offsetHeight) {// 不能滾動的時候依然需要阻止?jié)L動穿透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},... };

是否完美

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

總結(jié)：

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

經(jīng)測試：iphone5s和android沒有問題，更老的手機不在我們的兼容范圍內(nèi)了。

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

轉(zhuǎn)載于:https://www.cnblogs.com/lalalagq/p/9916981.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。