弹层蒙版(mask),ios滚动穿透,我们项目的解决方案
问题描述
项目开发遇到一个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);
}
};
// 使用指令
<!-- 弹层阻止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滚动穿透,我们项目的解决方案的更多相关文章
- 关于移动端弹层下的body滚动
关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...
- 【JS】341- 移动端滚动穿透的6种解决方案
前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...
- 记一个ios滚动穿透问题
直接上代码 <body style="overflow: hidden;-webkit-overflow-scrolling: touch;"> <div id= ...
- iOS 滚动视图的复用问题解决方案
LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题.它可以支持跨View层的复用,用易用方式来 ...
- js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。
背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- js 弹层下面的body禁止滚动
弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想 ...
- modal 遮罩层,滚动穿透 bug
modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...
- 键盘压缩背景,ios滚动不流畅,禁止遮罩层下面内容滚动
1.<!--防止软键盘压缩页面背景图片--> <script> const bodyHeight = document.documentElement.clientHeight ...
随机推荐
- 安卓BitmapFactory.decodeStream()返回null的问题解决方法
问题描述: 从网络获取图片,数据为InputStream流对象,然后调用BitmapFactory的decodeStream()方法解码获取图片,返回null. 代码如下: private Bitma ...
- 第二章、Tiny4412 U-BOOT移植二 启动分析【转】
本文转载自:http://blog.csdn.net/eshing/article/details/37521481 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.启动过程说明 讲解启动过 ...
- bzoj1477 && exgcd学习笔记
exgcd 由于忘记了exgcd,这道题就没做出来... exgcd的用处是求ax+by=gcd(a,b)这样方程的解 大概是这个样子的 void ext_gcd(long long a, long ...
- Mybatis 代码自动生成(generatorConfig.xml配置)
博客推荐: Mybatis最入门---代码自动生成(generatorConfig.xml配置) MyBatis Generator generatorConfig.xml配置详解 pom.xml&l ...
- Android属性之build.prop生成过程分析(转载)
转自: http://www.cnblogs.com/myitm/archive/2011/12/01/2271032.html 本文简要分析一下build.prop是如何生成的.Android的bu ...
- 如何判断js的变量的数据类型
文章首发: http://www.cnblogs.com/sprying/p/4349426.html 本文罗列了一般的Js中类型检测的方法,实际上是每个新手在构建Js知识体系时,都要知晓的,而我只是 ...
- Unity 图形学 基础知识总结
1. 渲染流水线 三大块:应用阶段,几何阶段,光栅化阶段 渲染图元 顶点信息 GPU流水线 顶点数据=> 顶点着色器 ...
- 9.28NOIP模拟题
9.28NOIP模拟题 题目 哈 哈哈 哈哈哈 英文题目与子目录名 ha haha hahaha 单个测试点时间限制 1秒 1秒 1秒 内存限制 256M 128M 64M 测试点数目 10 10 1 ...
- [Swift通天遁地]二、表格表单-(18)快速应用多种预定义格式的表单验证
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- .net 必看书籍2
一.入门 1.<HTML与CSS入门经典(第7版) >HTML入门 点评:html语言的入门,由于html极其简单所以同类其他书也可代替,本书并非经典,本书摆在这里纯属占位!你可以用其他书 ...