问题描述

项目开发遇到一个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. 可以滚动:不禁用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

弹层蒙版(mask),ios滚动穿透,我们项目的解决方案的更多相关文章

  1. 关于移动端弹层下的body滚动

    关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...

  2. 【JS】341- 移动端滚动穿透的6种解决方案

    前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...

  3. 记一个ios滚动穿透问题

    直接上代码 <body style="overflow: hidden;-webkit-overflow-scrolling: touch;"> <div id= ...

  4. iOS 滚动视图的复用问题解决方案

    LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题.它可以支持跨View层的复用,用易用方式来 ...

  5. js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。

    背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...

  6. modal 弹框遮罩层,滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  7. js 弹层下面的body禁止滚动

    弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想 ...

  8. modal 遮罩层,滚动穿透 bug

    modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...

  9. 键盘压缩背景,ios滚动不流畅,禁止遮罩层下面内容滚动

    1.<!--防止软键盘压缩页面背景图片--> <script> const bodyHeight = document.documentElement.clientHeight ...

随机推荐

  1. 安卓BitmapFactory.decodeStream()返回null的问题解决方法

    问题描述: 从网络获取图片,数据为InputStream流对象,然后调用BitmapFactory的decodeStream()方法解码获取图片,返回null. 代码如下: private Bitma ...

  2. 第二章、Tiny4412 U-BOOT移植二 启动分析【转】

    本文转载自:http://blog.csdn.net/eshing/article/details/37521481 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.启动过程说明 讲解启动过 ...

  3. bzoj1477 && exgcd学习笔记

    exgcd 由于忘记了exgcd,这道题就没做出来... exgcd的用处是求ax+by=gcd(a,b)这样方程的解 大概是这个样子的 void ext_gcd(long long a, long ...

  4. Mybatis 代码自动生成(generatorConfig.xml配置)

    博客推荐: Mybatis最入门---代码自动生成(generatorConfig.xml配置) MyBatis Generator generatorConfig.xml配置详解 pom.xml&l ...

  5. Android属性之build.prop生成过程分析(转载)

    转自: http://www.cnblogs.com/myitm/archive/2011/12/01/2271032.html 本文简要分析一下build.prop是如何生成的.Android的bu ...

  6. 如何判断js的变量的数据类型

    文章首发: http://www.cnblogs.com/sprying/p/4349426.html 本文罗列了一般的Js中类型检测的方法,实际上是每个新手在构建Js知识体系时,都要知晓的,而我只是 ...

  7. Unity 图形学 基础知识总结

    1. 渲染流水线     三大块:应用阶段,几何阶段,光栅化阶段                       渲染图元   顶点信息    GPU流水线     顶点数据=>     顶点着色器 ...

  8. 9.28NOIP模拟题

    9.28NOIP模拟题 题目 哈 哈哈 哈哈哈 英文题目与子目录名 ha haha hahaha 单个测试点时间限制 1秒 1秒 1秒 内存限制 256M 128M 64M 测试点数目 10 10 1 ...

  9. [Swift通天遁地]二、表格表单-(18)快速应用多种预定义格式的表单验证

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  10. .net 必看书籍2

    一.入门 1.<HTML与CSS入门经典(第7版) >HTML入门 点评:html语言的入门,由于html极其简单所以同类其他书也可代替,本书并非经典,本书摆在这里纯属占位!你可以用其他书 ...