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. 在WINDOWS服务器下设置MARIADB自动备份的方法

    WINDOWS服务器下自动备份有三个步骤 1.首先新建一个.BAT文件里面输入 @echo offset "Ymd=%date:~,4%%date:~5,2%%date:~8,2%" ...

  2. CVTE前端一面

    1.如果不设置cookie失效时间:  关闭浏览器自动关闭. 有没有手写过cookie HttpOnly 2.跨域的几种方式 如何实现cors 2.web安全: xss,csrf    如何防范 3. ...

  3. IIS 字符串过长

    jquery.datatable.js---弹窗要用极速模式 <?xml version="1.0" encoding="utf-8"?><c ...

  4. LeetCode 142. Linked List Cycle II 判断环入口的位置 C++/Java

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. To r ...

  5. pflag如何使用

    1 为何我对这个库感兴趣呢? 因为我想看看Kubernetes的源码,Kubernetes,Hugo啥的都是那这个解析的命令行参数 2 安装 go get github.com/spf13/pflag ...

  6. python3下同时取得exe、zip和chm下载地址

    from selenium import webdriverimport osimport timeimport re cur_path=os.getcwd() #得到程序的当前目录str_file= ...

  7. 关于c# Debug和Release的区别 （转）

    关于Debug和Release的区别之讨论本文主要包含如下内容: 1. Debug 和 Release 编译方式的本质区别2. 哪些情况下 Release 版会出错2. 怎样“调试” Release ...

  8. Python学习日记 --day4

    list列表: # # 列表 ''' # 增 # li = [1,'qwer','小明',[1,2,'qwe']] # print(li[0],type(li)) # 跟字符串的操作方法是一样的,返回 ...

  9. css样式基础详解

    一.字体属性:(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 2.样式 {font-styl ...

  10. Office免费激活方法！亲测有效！2019年4月3日测试

    内容转载自:https://blog.csdn.net/qq_41785863/article/details/83619401 防止原博主删除,我先放上自己下载好了的工具分享链接. 链接:https ...