最近遇到一个很 巨恶心的问题  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. dotnet core 数据库

    dotnet core 数据库 程序开发过程中,需要使用数据对数据进行存储,分析等.通常而言都会使用ORM来实现关系数据库与实体对象的转化,过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持 ...

  2. Verilog学习笔记基本语法篇（七）········ 生成块

    生成块可以动态的生成Verilog代码.可以用于对矢量中的多个位进行重复操作.多个模块的实例引用的重复操作.根据参数确定程序中是否包含某段代码.生成语句可以控制变量的声明.任务和函数的调用.还能对实例 ...

  3. atoi 和 atof （把数字字符串转化为数字储存）

    int atoi(char *s) 如果字符串内容是整数就返回该整数,否则返回0 double atof(char *s) 同上,不过返回浮点型 #include<iostream> #i ...

  4. 怎么实现hibernate悲观锁和乐观锁?

    隔离级别的安全控制是整体一个大的方面,而锁机制更加的灵活,它执行的粒度可以很小,可以在一个事务中存在. Hibernate悲观锁是依靠底层数据库的锁机制实现,在查询query.setLockMode( ...

  5. 使用sqoop将mysql中表导入hive中报错

    [hdfs@node1 root]$ sqoop import --connect jdbc:mysql://node2:3306/cm?charset-utf8 --username root -- ...

  6. malloc分配失败的两个现象

    在实际代码中,malloc的反复分配释放,可能会导致某一次malloc分配失败,虽然上一次调用malloc分配成功(然后释放),下一次在相同地方调用malloc分配可能会失败,疑问在于,既然上一次分配 ...

  7. I两种冒泡算法

    两种冒泡算法: 第一个循环,I 定位当前坐标,第二个循环 把 I 之后的每个数都与 I 比较(比 I 小的都去坐标I),第二个循环之后 坐标 I 为数组里最小的数值. 效率比较高的冒泡算法: stat ...

  8. 解决上传app store卡在正在通过iTunes Store鉴定

    打开终端输入代码即可 cd ~ mv .itmstransporter/ .old_itmstransporter/ "/Applications/Xcode.app/Contents/Ap ...

  9. Django笔记 —— 模型高级进阶

    最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...

  10. C指针分析详解

    局部变量和全局变量初始化区别: 局部变量,在未初始化情况下,初值为随机值.C规范对该初值并没有做规定,具体实现由编译器决定.如VC/VS等编译器,会将初始值值为0xCCCCCCCC, 而GCC等编译器 ...