问题描述

项目开发遇到一个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. 我所不知道的 javascript 函数

    对字符串进行 Base64 加密: window.btoa(str) ---转码 window.atob(str) ---解码 这种加密方法不能加密中文,可以先进行 encodeURIComponen ...

  2. Java遍历一个文件夹下的全部文件

    Java工具中为我们提供了一个用于管理文件系统的类,这个类就是File类,File类与其它流类不同的是,流类关心的是文件的内容.而File类关心的是磁盘上文件的存储. 一,File类有多个构造器,经常 ...

  3. 数据分析在web交互设计中的作用 页面跳出率 100% 原因分析

    通过分析访问的路径,发现,访问者访问其他页面,直接跳出 页面跳出率  100% 说明: 连作者都发现的导航路径不清晰 对导航进行改版:清晰.明了

  4. Luogu3403跳楼机

    https://zybuluo.com/ysner/note/1099616 题面 给你三个数\(x\),\(y\),\(z\),问你能够凑出多少个[1,\(h\)]之间的数. 解析 处理出\(y\) ...

  5. 开发PL/SQL子程序和包及使用PL/SQL编写触发器、在JDBC中应用Oracle

    1.  子程序的各个部分: 声明部分.可执行部分.异常处理部分(可选) 2.子程序的分类: A.  过程 - 执行某些操作 a.  创建过程的语法: CREATE [OR REPLACE]  PROC ...

  6. Spark 机器学习 ---Word2Vec

    package Spark_MLlib import org.apache.spark.ml.feature.Word2Vec import org.apache.spark.sql.SparkSes ...

  7. Weblogic 启动慢解决方法

      添加 启动参数  :      -Xms256m -Xmx512m -XX:MaxPermSize=256m 原因 : 实际是JVM在Linux下的bug:他想调用一个随机函数,但是取不到. 暂时 ...

  8. jsp简单学习总结

    以下均为jsp页面 1:<jsp:include page="index.jsp"/>相当于嵌入一个页面.还有一种是<frame src="main_l ...

  9. 使用Java生成word文档(附源码)

    当我们使用Java生成word文档时,通常首先会想到iText和POI,这是因为我们习惯了使用这两种方法操作Excel,自然而然的也想使用这种生成word文档.但是当我们需要动态生成word时,通常不 ...

  10. 【洛谷2469/BZOJ1927】[SDOI2010]星际竞速(费用流/最小路径覆盖)

    题目: 洛谷2469 分析: 把题目翻译成人话:给一个带边权的DAG,求一个路径覆盖方案使路径边权总和最小.从点\(i\)开始的路径需要额外加上\(A_i\)的权值. 回xian忆chang一xue下 ...