ios下overflow:hidden 无效

ios下overflow:hidden 无效原因及解决方案

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

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

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

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

overflow的实现原理：

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

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

3. 假如你设置了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的问题（这里没咋看懂，把原文贴一下：Finally, in order to deal with body padding, and in case you ever want to set a border on the body, make the math work with box-sizing: border-box for the body.）

最后的代码整理如下：

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

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

over!