移动端H5滚动穿透解决方案
最近遇到一个很 巨恶心的问题 ios10下面 页面弹窗有滚动穿透问题
各种google 终于找到了答案,但是体验还不是很好,基本能忍受
废话不多说,上方法
最后终于想到一个处理方案,就是第一种方案的升级版,需要配合JS,大致思路是弹窗显示时JS读取这时页面的scrollTop,然后将主体内容position:fixed,top设为scrollTop的负值,这样可以从根本上固定下层内容,然后隐藏弹窗时再将主体内容position:static;scrollTop设回来。完美解决问题。经测试这种方案在移动端设备都试用,包括浏览器和hybrid模式APP。
原文链接地址:https://www.arayzou.com/2015/08/24/%E7%A7%BB%E5%8A%A8%E7%AB%AFH5%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/
移动端H5滚动穿透解决方案的更多相关文章
- AngularJS中移动页面滚动穿透解决方案
()] + s[]) >= , preventDefault: false, click: IscrollAndroidBug.click() }); var _ele = document.g ...
- ios,弹窗遮罩滚动穿透解决方案
- 【JS】341- 移动端滚动穿透的6种解决方案
前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...
- js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。
背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...
- Vue项目移动端滚动穿透问题
概述 今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用. 上层无需滚动 如果上层无需滚动的话,直接屏蔽上层的 ...
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- h5页面弹窗滚动穿透的思考
可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码: <!-- 弹窗模块 引用时移除static_tip类--> <div class="ma ...
- 弹层蒙版(mask),ios滚动穿透,我们项目的解决方案
问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...
- 移动端H5多终端适配解决方案
推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js github地址:https://github.com/isHelenaChan/flexible 2.来自“大漠”(就职于淘宝,也是 ...
随机推荐
- while else
count = 0 while count <= 5 : count += 1 if count == 3:pass print("Loop",count) else: pr ...
- python3 练习题100例 (二十八)打印一定范围内的素数
题目内容: 给定一个大于2的正整数n,打印出小于n(不包括n且n不大于100)的所有素数. 要求将符合条件的输出填入一个列表中,打印的结果为该列表. 输入格式: 共一行,为一个大于2的正整数 输出格式 ...
- grep用法小结
用法 grep [OPTIONS] PATTERN [FILE...] grep [OPTIONS] -e PATTERN ... [FILE...] grep [OPTIONS] -f FILE . ...
- hdu 1394 Minimum Inversion Number(线段树)
参考:http://blog.sina.com.cn/s/blog_691ce2b70101ldmm.html https://blog.csdn.net/wiking__acm/article/de ...
- 牛客暑假多校第五场A.gpa
一.题意 给出你的N门课程的考试成绩和所占的机电数目.允许你放弃K门课的成绩,要求你的平均学分绩最高能达到多少. Kanade selected n courses in the university ...
- Tomcat配置SSL连接
1.服务器端单项认证 在Tomcat的server.xml文件中,已经提供了现成的配置SSL连接器的代码,只要把<Connector>元素的注释去掉即可: <!— Define a ...
- Android开发——View绘制过程源码解析(一)
)UNSPECIFIED:表示View可以设置成任意的大小,没有任何限制.这种情况比较少见. 2. MeasureSpec的生成过程 2.1 顶级View的MeasureSpec // desired ...
- 类 java.util.Collections 提供了对Set、List、Map进行排序、填充、查找元素的辅助方法。
类 java.util.Collections 提供了对Set.List.Map进行排序.填充.查找元素的辅助方法. 1. void sort(List) //对List容器内的元素排序,排序的规 ...
- 【C#】 引用类型
[C#] 引用类型 附图和代码为了便于理解引用类型 public static void RefDemo() { RefClass r1 = new RefClass { Name = "r ...
- Python-学习-项目1-即时标记-1
买了一本Python入门,奈何看不下去,只能是先看后面的项目,看到那里不懂的时候在回去学习. 项目名字:即时标记 大致的意思就是把一个纯文本文件标记成自己想要的格式文件. 首先就是待处理文本,我找不到 ...