最近遇到一个很 巨恶心的问题  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. 怎么用Python Flask模板jinja2在网页上打印显示16进制数？

    问题:Python列表(或者字典等)数据本身是10进制,现在需要以16进制输出显示在网页上 解决: Python Flask框架中 模板jinja2的If 表达式和过滤器 假设我有一个字典index, ...

  2. print(__file__)返回<encoding error>的问题

    今天写了一下代码,本来是想得到当前文件的上面三层的目录的,结果返回的却是错误 import os import sys print(__file__) # 得到上上层目录的路径之后,加入到默认的环境变 ...

  3. 回形矩阵--python

    def bsm(n): a = [[0]*n for x in range(n)] p = 0 q = n-1 t = 1 while p < q: for i in range(p,q): a ...

  4. 对C语言连等式的学习

    例子如下 [pgsql@localhost soft]$ cat test1.c #include <stdlib.h> #include <stdio.h> int main ...

  5. 掘金 Android 文章精选合集

    掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...

  6. 「个人训练」Radar Installation（POJ-1328）

    这条题目A了十次...emmmmm 其实不难就是一个贪心.... 先说下算法(之前的和现在的) 之前考虑的其实很简单.用平面几何即可将雷达可以放置的区域转化为区间(顺便判断是否无解.问题就比较简单了: ...

  7. 第七篇数字&字符串之练习题

    1.执行Python脚本的两种方式2.简述位.字节的关系3.简述ascii.unicode.utf-­‐8.gbk的关系4.请写出“李杰”分别用utf-­‐8和gbk编码所占的位数5.Pyhton单行 ...

  8. python3 安装win32clipboard 和 win32con 报No matching distribution found for win32con错误

    win32con.win32clipboad不能用pip install 安装,也不能够查找到这个包,原来,这个是pypiwin32的一部分,直接安装pypiwin32就可以了 pip install ...

  9. [HNOI2004]打鼹鼠

    鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿牛编写了一个打鼹鼠的游戏:在一个\(n*n\)的网格中,在某些时刻鼹鼠会在某一个网格探出头来透透气.你 ...

  10. python第一天（安装运行python）

    1. 安装Python 3.7 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的.由于3.x版越来越普及,我们的教程将以最新的Python 3.7版本为基础.请确保你 ...