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. 整个viewportoverflow是由html中的overflow来决定的;

  2. 假如你不去设置htmloverflow(也就是默认的visible属性),而去设置bodyoverflow:hidden,也是可以的;

  3. 假如你设置了htmloverflow属性的值(除去默认的visible),那么bodyoverflow属性就不会生效了

     /*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%;
}

 

posted on 2021-06-25 18:07  ranyonsue  阅读(2115)  评论(0编辑  收藏  举报

导航