最近遇到一个很 巨恶心的问题  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. hive 学习系列三（表格的创建create-table）

    表格创建: 语法 第一种建表的形式: 说明: temporary 临时表,在当前回话内,这张表有效,当回话结束,可以理解为程序结束,则程序终止. external 外部表, hdfs 上的表的文件,并 ...

  2. python循环，函数

    平常的网页会转换成ascll码,在转编译成十六进制a='http://www.mywebsit.com/?query=python&count=20'print(a)b=a.replace(' ...

  3. python-time模块、sys模块、os模块以及大量实例

    模块 通俗的说模块就把一个已经写好的带有可使用的函数的文件,通过文件名进行导入,然后调用里面的函数等来完成所需功能,模块封装了你需要实现功能的代码,使用者只需调用即可,简化代码量,缩短编程时间. ti ...

  4. ruby OpenURI模块使用

    OpenURI is an easy-to-use wrapper for Net::HTTP, Net::HTTPS and Net::FTP(OpenURI支持重定向) 像打开普通文件那样打开ht ...

  5. 5-sql语句

    1 [oracle@ocp ~]$ . oraenv # ORACLE_SID = [oracle] ? orcl The Oracle base has been set to /u01/app/o ...

  6. linux-clone-ip处理办法

    vim /etc/udev/rules.d/70-persistent-net.rules 步骤1:#将eth0相关的文件给删除 步骤2:#vi /etc/sysconfig/network-scri ...

  7. Java之枚举笔记(Enum)

    package com.simope.ljm; public class MyEnum { public static void main(String[] args) { System.out.pr ...

  8. 「题目代码」P1034～P1038（Java）

    P1034 C基础-求同存异 import java.util.*; import java.io.*; import java.math.BigInteger; public class Main ...

  9. localStorage简析

    声明:引用自http://www.cnblogs.com/st-leslie/p/5617130.html 一.什么是localStorage.sessionStorage 在HTML5中,新加入了一 ...

  10. 1107 Social Clusters （30 分）（并查集）

    并查集的基本应用 #include<bits/stdc++.h> using namespace std; ; vector<int>vec[N]; int p[N]; con ...