最近遇到一个很 巨恶心的问题  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滚动穿透解决方案的更多相关文章

  1. AngularJS中移动页面滚动穿透解决方案

    ()] + s[]) >= , preventDefault: false, click: IscrollAndroidBug.click() }); var _ele = document.g ...

  2. ios，弹窗遮罩滚动穿透解决方案

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

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

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

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

  5. Vue项目移动端滚动穿透问题

    概述 今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用. 上层无需滚动 如果上层无需滚动的话,直接屏蔽上层的 ...

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

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

  7. h5页面弹窗滚动穿透的思考

    可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码: <!-- 弹窗模块 引用时移除static_tip类--> <div class="ma ...

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

    问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...

  9. 移动端H5多终端适配解决方案

    推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js github地址:https://github.com/isHelenaChan/flexible 2.来自“大漠”(就职于淘宝,也是 ...

随机推荐

  1. re模块（详解正则）

    re模块 imort re 1.\w \W print(re.findall('\w','ab 12\+- _*&')) #\w 匹配字母 数字 及下划线 执行结果:['a', 'b', '1 ...

  2. 自定义vim配置文件vimrc，用于c/c++编程

    vim作为Linux下广受赞誉的代码编辑器,其独特的纯命令行操作模式可以很大程度上方便编程工作,通过自定义vim配置文件可以实现对vim功能的个性化设置. vim配置文件一般有两份,属于root的/e ...

  3. 抽象类实验：SIM卡抽象

    抽象SIM: package sim_package; public abstract class SIM { public abstract String giveNumber(); public ...

  4. 学习RUNOOB.COM进度一

    了解MongoDB 由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能. 特点 面向文档,操作简单容易 设置任何索引,实现更快排序 本地 ...

  5. 集合--数据结构与算法JavaScript描述(9)

    集合 Set 概念 (跟高中时数学课上学的集合几乎一模一样哦哈哈) 集合是一种包含不同元素的数据结构. 集合中的元素称为成员. 集合的两个最重要的特性: 集合中的成员是无序的. 集合中不允许相同成员存 ...

  6. 10 TCP 传输控制协议 UDP区别

    1.tcp和udp区别 2.TCP通信模型 生活中的电话机 如果想让别人能更够打通咱们的电话获取相应服务的话,需要做一下几件事情: 买个手机 插上手机卡 设计手机为正常接听状态(即能够响铃) 静静的等 ...

  7. 1、Java多线程基础：进程和线程之由来

    Java多线程基础:进程和线程之由来 在前面,已经介绍了Java的基础知识,现在我们来讨论一点稍微难一点的问题:Java并发编程.当然,Java并发编程涉及到很多方面的内容,不是一朝一夕就能够融会贯通 ...

  8. leetcode笔记--6 Add Digits

    question: Given a non-negative integer num, repeatedly add all its digits until the result has only ...

  9. C#获取网络图片

    简单获取图片 string url = zhi_txt.Text;//图片地址 string dizhi = lujing.Text;//图片下载后保存路径及图片名称要写在一块 WebClient w ...

  10. Git 使用 粗糙记录

    版本控制应该是每一个开发人员应该会的东西,奈何,学校没有学习,随着写代码的时间的加长,越来月觉得版本控制的必要性了. 记得在实习的公司,同一痛的都是SVN. 至于GIt和SVN的区别,直接看连接 ht ...