IOS不支持overflow: hidden;

假设页面上有个弹出窗,弹出窗出现后,只想让用户的视觉锁定在弹出窗上,正常我们会想到用overflow:hidden这个属性来实现,如下

html{
overflow:hidden;
}

这样写在PC端上没有任何问题,效果杠杠到,但是在IOS移动端上,弹出窗出现后,依旧可以在背景层部分滑动

解决方案:

html{
overflow:hidden;
position:fixed;
}

如果需要关闭弹窗后,滚动条出现,使用如下CSS即可。

html{
overflow:auto;
position:static;
}

但是,会存在“关闭弹窗后,滚动条会返回到页面顶部”的问题  !!!!!!!!!!!!!!!!!!!!!!!

======================================================================

点击按钮,显示弹窗:

(按照上面的方法解决,加上overflow:hidden;position:fixed; 虽然滑动的时候,下面的页面不会被滑动,但是页面会滚动到顶部,而不是保持在底部)

最终找到一个方法,就是用scroll-view来代替

  代码:

//html

<scroll-view style="height:100vh" scroll-y="{{isScroll}}">
<view style="width:100%;">
<view style="height:3000rpx;">
<view>header</view>
<view style="margin-top:2900rpx;" id="footer">footer</view>
<button bindtap="button_click">显示弹窗</button>
</view>
</view>
<!--弹窗 -->
<view class="mask" wx:if="{{showAlert}}" bindtap="closeModal">
<view class="showModal">
弹窗
</view>
</view>
</scroll-view>
//css

.mask{
width:100%;
height:100%;
position:fixed;
top:;
left:;
background:rgba(0,0,0,.7);
}
.showModal{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:70%;
height:600rpx;
background:white;
}
//js

Page({
/**
* 页面的初始数据
*/
data: {
showAlert:false,
isScroll: true,
},
button_click:function(){
this.setData({
showAlert: true,
isScroll: false
})
},
closeModal:function(){
this.setData({
showAlert: false,
isScroll: true
})
}
})

  效果图:

diadia的的

IOS不支持overflow: hidden;的更多相关文章

  1. 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素

    同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...

  2. 【解决】Android 2.x 不支持overflow、position:fixed解决方案【转】

    Android 2.x和IOS5以下都不支持overflow:auto属性(position:fixed也不支持). 移动端浏览器兼容性和PC端相比,有过之而无不及.操作系统版本及各式浏览器和各式的屏 ...

  3. ie7 不兼容overflow:hidden;

    用overflow:hidden; 隐藏不需要显示的数据,在IE6\IE8都显示正常,但是在ie7中就是不起作用,万恶的IE7啊.后来加了一句position:relative; 好了... stat ...

  4. 修改css的(屏蔽)overflow: hidden;实现浏览器能把网页全图保存成图片

    摘要: 1.项目需要,需要对网页内容“下载”保存成全图片 2.QQ浏览器等主流浏览器都支持这种下载保存功能 3.项目需要场景:编写好的项目维护文档,放在服务器上.如果是txt不能带图片可视化,如果wo ...

  5. overflow:hidden 影响inline-block元素周围元素下移

    前言: 最近在切页中,我想实现左边一个类似下拉选框,且不允许输入,右边有一段垂直居中的文字描述的效果.我对文字用的是p标签.其实可以用个i/b/em等其他行内标签,同时也具有一定语义,做为强调提示,( ...

  6. 溢出overflow: hidden

    如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表 ...

  7. JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  8. 如何不使用 overflow: hidden 实现 overflow: hidden

    一个很有意思的题目.如何不使用 overflow: hidden 实现 overflow: hidden? CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么 ...

  9. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

随机推荐

  1. SQL 数据排重,去掉重复数据 有用

    .最大的错误:    在对数据排重的时候,首先想到的就是Distinct,虽然这很管用,但多数场合下不适用,因为通常排重后还要做进一步处理,比如对编号排重后要按日期统计等. 无法排重的Group by ...

  2. 初次接触URDF

    使用URDF创建机器人3D仿真模型 在真实的机器人上编程可以更好地让我们理解机器人的控制方式,因为真实的机器人会有反馈.如果没有真实的机器人,那么ROS仿真是一个很好的选择. ROS通过URDF(Un ...

  3. elasticsearch plugin

    bin/plugin -install de.spinscale/elasticsearch-plugin-suggest/0.90.5-0.9 plugin -install mobz/elasti ...

  4. C# 文本输入限制类型,datagridview单元格输入验证

    1.只能输入double类型 private void textBoxX6_KeyPress(object sender, KeyPressEventArgs e) { { //数字0~9所对应的ke ...

  5. spring深入了解心得

    spring 主要核心组件 :Core.上下文(Context) .实体(Bean): spring 主要由两大特色:控制反转(IOC).面向对象(AOP): spring中Core主要用于组建Bea ...

  6. GraphQL 优势之处

    一次查询,搞定需求 举个例子,Book对象有bookTypeId,那我想看对应的bookTypeName,bookType对应的summary咋办? 如果你用RESTful Api ,免不了要定制接口 ...

  7. 【SQL】- 基础知识梳理(二) - SQL简介

    一.引言 在梳理这些知识之前,说实话,如果有人问我SQL是什么?我可能会回答就是“INSERT,DELETE,UPDATE,SELECT”语句呗,还能是啥. 二.SQL概念 SQL是什么? SQL是S ...

  8. 有符号数和无符号数------c++程序设计原理与实践(进阶篇)

    有符号数与无符号数的程序设计原则: 当需要表示数值时,使用有符号数(如 int). 当需要表示位集合时,使用无符号数(如unsigned int). 有符号数和无符号数混合运算有可能会带来灾难性的后果 ...

  9. gets()scanf()有害------c++程序设计原理与实践(进阶篇)

    最简单的读取字符串的方式是使用gets(),例如: char a[12]; gets(a); 但gets()和scanf()是有害的,曾经有大约1/4的成功黑客攻击是由于gets()和它的近亲scan ...

  10. 同一个程序里有多个版本的App

    在Xcode中添加多个targets进行版本控制,就是同一个app开发多个版本 以Xcode 9.3 为例 1. 创建 点击左侧工程项目文件,选择TARGETS 下的项目右击选择 Duplicate. ...