弹层蒙版（mask），ios滚动穿透，我们项目的解决方案

Acceml 发布于2019-06-25 17:01 / 3546人阅读

摘要：浮层的入口有多个页面浮层后面可滚动的容器有多个个滚动容器有横向和纵向滚动，很难记录和方法禁用事件，同样会导致弹层容器无法滚动，很不幸我们的弹层需要能够滚动。

问题描述

项目开发遇到一个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);
  }
};

// 使用指令


    ...
    ...
    ...


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

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

是否完美

可以看到思路并不复杂，无非是滚动子元素来决定是否禁用touchmove事件。
但是此方案并不完美，因为当弹出层有表单元素时，弹出键盘后表单本身一般需要可以滚动，此时滚动的是body元素，当touchmove禁用后body是无法滚动的，暂无解法只能暂时用方法1

总结：

此方案适用于弹层中有滚动容器，不适用于弹层本身为1个表单

经测试：iphone5s和android没有问题，更老的手机不在我们的兼容范围内了。

服务器托管专线服务弹层蒙版图层蒙版怎么用巧用CSS的MASK滤镜 ios tableview滚动条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/17182.html

CSS相关文章

摘要：如何用获取虚拟键盘高度前端早读课月号早读文章由汤谷投稿分享。大杀器和把动画转换成原生动画初来乍到，本文搬运自我月份在知乎发的文章。前端面试之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面试中经常被问到的。如何用 js 获取虚拟键盘高度？-前端早读课 9月7号早读文章由@汤谷投稿分享。正文从这开始～这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题...

FrozenMap 2019-08-29 14:21 评论0 收藏0
视觉效果 -- iOS Core Animation 系列三

摘要：边框绘制在图层边界里面，在所有子图层之前。对上面的示例代码坐下调整运行效果如下如上面的示例的结果一样，边框并不会把寄宿图或子图层的相撞计算出来。属性可以实现组透明，如果设置成，图层和它的子图层会被合成一个整体图片。本片文章前三章内容大家比较常用，后面的可能会不那么常用，前面的基础内容不想看了可以直接从第4段开始圆角 conrnerRadius 这个功能还是很常见的,本来不想记了，为...

idealcn 2019-06-25 16:56 评论0 收藏0
SVG蒙版(mask)的基础使用教程

摘要：接下来我先以为例，简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一，然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变，应用到彩色图层上就会产生透明度的渐变。蒙版工作原理设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例，简单解释蒙版的工作原...

Pines_Cheng 2019-08-29 12:19 评论0 收藏0
SVG蒙版(mask)的基础使用教程

摘要：接下来我先以为例，简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一，然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变，应用到彩色图层上就会产生透明度的渐变。蒙版工作原理设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例，简单解释蒙版的工作原...

LittleLiByte 2019-08-01 16:35 评论0 收藏0
FastClick 源码解读

摘要：所有浏览器浏览器不支持安卓中中有属性安卓中中有属性有属性的有属性的所以在不需要的浏览器会直接掉，不会执行下面的所有代码。见源码行，可以看出在响应无操作后，则触发。其实一直就想花些时间读一读那些优秀的开源库，今天终于下了决定打算死磕下自己，2016年每个月读2-3个优秀的开源库，把源码精彩的地方和自己心得分享给大家。目录（一）背景（二）源码解析（三）Zepto 点击穿透与 Fast...

Chaz 2019-08-19 17:24 评论0 收藏0