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学习【02】Python基础

    一.Python内部执行过程 1.Python的后缀名可以是任意? print("hello,world")  保存成  .py / .txt / .sb / .aaa 都可以用在 ...

  2. asp微信支付代码v4.1无需证书版,带回调入库的asp支付源码

    昨天帮一个客户写的,他的程序是老的asp,想实现微信在手机上下单付款,让帮忙给写一份asp微信支付的接口代码,昨天晚上闲着没事,搞了一个晚上才搞好,其实asp支付并不需要安装证书,其实asp支付也很好 ...

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

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

  4. C#解析json和xml数据

    C#解析json和xml数据 // 用到的包using Newtonsoft.Json; // using Newtonsoft.Json.Linq; const string value = &qu ...

  5. dubbo rest服务 No provider available for the service 错误问题

    1.版本 dubbo 2.6.2 2.描述 消费者调用dubbo rest服务报No provider available for the service错误 网络上有讲是实体类未实现Serializ ...

  6. MTK之DrvGen的使用

    打开mcu\custom\drv\Drv_Tool [L206X_code20190321\custom\drv\Drv_Tool]下的DrvGen.exe,如下图所示: 点击"Open&q ...

  7. 使用events.EventEmitter 控制Node.js 程序执行流程

    使用events.EventEmitter 控制Node.js 程序执行流程 标题写的可能也不太对,大家领会精神: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. ...

  8. Redis物理文件结构

    Redis物理文件结构  对于数据库,个人习惯先从物理结构文件入手,整体上看一下有哪些文件,都是什么作用.类似于MySQL,数据文件和配置文件是Redis最基本也是做主要的两个物理文件之一,相比MyS ...

  9. 使用hexo在GitHub上无法上传博客

    原以为是秘钥或者其他错误,后来发现是邮箱设置的问题 在GitHub的你账号网页上右上角,个人的登录退出的位置,找到setting: setting->emails->Keep my ema ...

  10. jquery中的 deferred之 then (二)

    例: var def = $.Deferred(); var prs1 = def.then(function (val) { var result = val + "_123" ...