彈層蒙版(mask),ios滾動穿透,我們專案的解決方案
阿新 • • 發佈:2018-11-06
問題描述
專案開發遇到一個ios獨有的問題,在wkwebview中穩定復現
問題: 彈出一個蒙版,當在蒙版上面滑動的時候蒙版後面的內容滾動了
這當然是ios的bug,但是經過我們測試iphone7也會復現這個問題,所以沒辦法需要相容。
百度了下好多思路
方法1: 直接禁用滾動容器的overflow,然後記錄scrollTop並恢復,這種方法不適合我們當前場景。
1. 浮層的入口有多個頁面
2. 浮層後面可滾動的容器有多個(3個)
3. 滾動容器有橫向和縱向滾動,很難記錄scrollTop和scrollLeft
方法2: 禁用touchmove事件,同樣會導致彈層容器無法滾動,很不幸我們的彈層需要能夠滾動。
方法3:
我們的方法
同樣基於方法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沒有問題,更老的手機不在我們的兼容範圍內了。
原文地址:https://segmentfault.com/a/1190000016900193