overflow:hidden在IOS移动端

2021-07-30 本文已影响0人 cain07

overflow:hidden在IOS移动端问题

页面上有个弹出窗，弹出窗出现后禁止弹框上下滚动弹框内容禁止超出弹框
用到了 overflow:hidden
效果很明显不滚动了超出的内容隐藏了在android 机子没问题
但是 ios 极个别机子出现内容还是超出了弹框盖住标题头等问题

1.overflow:hidden;

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

解决方案：

[css]html{
overflow:hidden;
position:fixed;
}

还是会有
直接去掉 overflow:hidden;
写 position:fixed; 就可以了。

2.

ios下overflow:hidden 无效原因及解决方案
在ipad和ios上设置overflow:hidden不起作用，目前网上找到的方法是给父级元素添加position:fixed，比如这样：

body {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
    }

原因暂时还没想清楚，网上也没有针对这方面的具体解释，等找到了回头来更新

在Stack Overflow上找到了大概的原因，翻译如下：

overflow的实现原理：

整个viewport的overflow是由html中的overflow来决定的；

假如你不去设置html的overflow（也就是默认的visible属性），而去设置body的overflow:hidden，也是可以的；

假如你设置了html的overflow属性的值（除去默认的visible），那么body的overflow属性就不会生效了

 /*body的overflow设置无效*/
 html{overflow: hidden;}
 body{overflow: scroll;}

上面的几点在大部分的现代浏览器里都是成立的，但ios下的除外，包括iphone和ipad

ios认为（玛德，标准制定者就是任性），网页内容是个整体，需要将所有的都显示出来，所有overflow就不该起作用，这是他们刻意的，不是bug，而且在更高版本的ios7,8,9中也是这样设定的（mmp）.

对viewport我们没法改变，但是我们可以通过改变body自身的overflow：

改变html的overflow默认属性（visible）为auto或者hidden，哪个都行，对后面的效果都是一致的，这样body就不会继承viewport的overflow属性，然后通过设置body的overflow:hidden，大部分的溢出内容就会被隐藏掉
不过设置了position:absolute的除外，因为它默认是相对viewport进行绝对定位的，这个时候你要对body进行设置position:relative
总结起来一句话，body的范围要比viewport的范围要大，这样才能使body的overflow生效

达到这个效果：

-body需要设置viewport的宽高：body{width:100%;height:100%}
-html和body的padding，margin都不能有；html的border也不能有
-给body加上box-sizing: border-box，解决padding的问题
-最后的代码整理如下：

html {
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

body {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  height: 100%;
}

3.transform
weinre 远程调试

对于iOS 9，可能需要使用它

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

overflow:hidden在IOS移动端