1、问题：移动端出现弹窗后，滑动页面，页面底部出现空白

二、原因

经过分析，发现overflow: hidden;在移动端失效，导致弹窗出现时，滑动页面，页面底部出现空白。

三、解决

参考网址：https://www.jianshu.com/p/b241c4a4ec34

弹窗打开时给body元素设置position: fixed, 弹窗关闭时给body元素设置position: static。

四、移动端兼容性问题解决方案

参考网址：https://github.com/markyun/My-blog/issues/88

解决overflow: hidden在移动端失效问题的更多相关文章

  1. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

  2. overflow hidden 遇上absolute失效

    原文地址 背景 这几天开发的时候遇到了个问题,如图1. 写了个demo 由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常.PM要求能够显示最后一个完整的标签. 当在iPhone5手机上查看页 ...

  3. 给元素设置overflow:hidden，pc端正常，但移动端依然可以滑动

    给设置overflow:hidden的元素设置position:fixed即可解决

  4. 利用float与overflow:hidden实现移动端两栏自适应布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  6. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  7. IE6 Bug overflow:hidden失效

    下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...

  8. IE6、7下overflow:hidden失效的问题

    问题产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative或者position:absolute属性时,父元素的overflow:hidden属性就会失效. 例如: ...

  9. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

随机推荐

  1. Python通过百度Ai识别图片中的文字

    版本:python3.7 工作中有需要识别图片中的汗字,查看了半天大神们的博客,但没找到完全可以用的源码,经过自己的实践,以下源码可以实现: 创建应用 首先你需要登录百度AI,选择文字识别,创建一个应 ...

  2. CSS3之3D轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Python课程第二天作业

     一.统计字符串格式 要求: # 1.统计元组中所有数据属于字符串的个数,提示: isinstance() # 数据: t1 = (1, 2, '3', '4', 5, '6') # 结果: 3 代码 ...

  4. [java,2019-01-25] 图片和二进制互转

    import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; import java.io.ByteArrayOu ...

  5. 调试dump文件

    1.设置好pdb文件和源代码路径 为了能正确分析Dump文件,我们必须要指定和程序一起出来的PDB文件,如果程序重新被编译了一次,即使代码没有任何变化,之前的PDB文件我们不能再继续使用.

  6. 【C语言 基础】什么流程控制？

    流程控制就是控制程序执行的顺序 流程控制的分类: 1.顺序执行 2.选择执行 定义 某些代码可能执行也可能不执行,有选择的执行某些代码 3.循环执行

  7. CentOS使用nginx部署https服务

    nginx安装参考:https://www.cnblogs.com/taiyonghai/p/6728707.html 自签证书生成参考:https://gmd20.github.io/blog/op ...

  8. 关于Apache做负载均衡

    Tomcat+apache配置负载均衡系统笔记 在Apache   conf目录下的httpd.conf文件添加以下文字 #---------------------start------------ ...

  9. JQ删除数组中的某个对象

    ---恢复内容开始--- var pros = []; 全局变量function doSearchSal(){ var param = {}; var searchSal=$.trim($(" ...

  10. PHP提交订单,信息的传递

    今天被之前的同事问到订单这一块(他用的是Laraver)..."多个商品在同一个订单里,怎么将相同的商品放进一个分组"... 当时我和他的反应都是,array_push, arra ...