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. 有什么学习MySQL的好教程吗？

      有什么学习Mysql的好教程吗? 文档是最好的,现整理如下: [mysql教程]MySQL 教程 [MySQL教程]MySQL 安装 [MySQL教程]MySQL 管理 [MySQL教程]MySQ ...

  2. shell脚本三——正则表达式

    shell函数:shell中允许将一组命令集合或语句形成一段可用代码,这些代码块称为shell函数.给这段代码起个名字称为函数名,后续可以直接调用该段代码. 格式:fun() { 命令 } Shell ...

  3. SVN忽略已提交的文件（ignore，移出版本控制）

    本文适用于已安装TortoiseSVN客户端的同学. 1.右键点击要忽略的文件夹或文件,鼠标移到“TortoiseSVN”,找到“Unversion and add to ignore list”,选 ...

  4. Python3实现自动点赞抖音小姐姐

    什么是抖音 抖音是2016年9月上线的一款音乐创意短视频社交软件,是一个专注年轻人的15秒音乐短视频社区.用户可以通过这款软件选择歌曲,拍摄15秒的音乐短视频,形成自己的作品. 效果 抖音经常能刷到很 ...

  5. <iframe width="250" height="250" src="http://www.baidu.com"></iframe>

     <iframe width="250" height="250" src="http://www.baidu.com">< ...

  6. Flutter环境搭建

    本文介绍mac上搭建Flutter环境 1.Flutter官方提供中国地区镜像地址:https://github.com/flutter/flutter/wiki/Using-Flutter-in-C ...

  7. C++使用指针的优点

    使用指针可以带来如下的好处: (1)可以提高程序的编译效率和执行速度,使程序更加简洁. (2)通过指针被调用函数可以向调用函数处返回除正常的返回值之外的其他数据,从而实现两者间的双向通信. (3)利用 ...

  8. ServerSocket详解及线程阻塞_03

    ServerSocket详解构造方法ServerSocket()ServerSocket(int port)ServerSocket(int port ,int backlog)serverSocke ...

  9. 基于SpringBoot+Mybatis+AntDesign快速开发平台，Jeecg-Boot 1.1 版本发布

    Jeecg-Boot 1.1 版本发布,初成长稳定版本 导读     平台首页UI升级,精美的首页支持多模式 提供4套代码生成器模板(支持单表.一对多) 集成Excel简易工具类,支持单表.一对多导入 ...

  10. node note

    1.关于next() next()函数接受一个Error对象,在判断错误时,返回这个next()函数,并传入自定义的Error对象可以被向下捕捉,你也可以自定义统一捕捉错误Error的中间件,在app ...