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. 关于破解visualsvn 我这里是版本是5.2.1

    1.首先备份当前安装visualSVN文件的bin目录,万一出错还能反个水.一般默认安装路径是C:\Program Files (x86)\VisualSVN\bin 2.然后运行ildasm,Win ...

  2. js异步处理历程

    为什么会出现异步: js执行环境是单线程的,异步处理就非常重要. 处理的方法: 方法一:callback hell 解决:解决了异步处理 存在问题:出现多个回调函数嵌套,代码就会比较乱,出现回调地狱现 ...

  3. AET PN结

    电场方向 电场方向和正电荷受力方向相同 飘移运动和扩散运动 多子和电场方向互相抵制,而多子是扩散运动,而对少子则是促进作用,当扩散和漂移达到动态平衡时,我们称PN结形成 PN结特性 单项导电性

  4. 75.纯 CSS 创作一支摇曳着烛光的蜡烛

    原文地址:https://segmentfault.com/a/1190000015580809 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:CSS 真强大! ...

  5. Python第4天

    主要内容: 数字(int) 字符串(replace/find/join/strip/startswith/split/upper/lower/format) 列表 append/extend/inse ...

  6. Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图（转载）

    Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图 2017年04月05日 10:53:13 李学凯 阅读数:104997更多 所属专栏: Intellij Idea   ...

  7. mysql左连接右连接（查询两张表不同的数据）

    有两张表:一张A表he一张B表 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 :right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录: ...

  8. Python 学习笔记02篇

    之前很庆幸早点报名课程 可以早点看到视频讲解,不至于后期太赶 不得不说原本21天压缩到14天再压缩到7天,如果可以完整且独立地完成至少三个作业,那水平应该真的很不错吧

  9. ansible简介，简单实用

    Ansible ansilbe是实现自动化运维的工具,基于python开发,实现批量系统配置,批量程序部署,批量运行命令等功能. ansible是基于模块工作的,自身是没有批量部署的能力.真正具有批量 ...

  10. Chen qiaoqiao Studio

    Welcome here! If you need any help, please contact us. Contact info Email: lovey_kids@163.com