如何解决IOS 下固定定位fixed 失效问题?


如何解决IOS 下固定定位fixed 失效问题?

相信大家在做移动端项目时都会遇到fixed失效的问题,在这里我们说的是在ios 下 ,头部底部都采用固定定位时,滑动中心部分时整个页面都跟着滚动也就是说固定定位失效了。那么如何解决这个问题呢?这里有个小诀窍分享给大家。

   

.header,.footer,.main{ display: block; } .header { position: fixed; top:0; left: 0; right:0; height:100px; } .footer { position: fixed; bottom: 0; left: 0; right:0; height: 30px; } .main{ /*main绝对定位,进行内部滚动*/ position: absolute; /*top是头部的高度*/ top: 100px; /*bottom是底部的高度*/ bottom: 30px; /*使之可以滚动*/ overflow-y: scroll; /*增加弹性滚动,解决滚动不流畅的问题*/ -webkit-overflow-scrolling:touch; } .main .content{ height:2000px; }
  • 另外,代码中header和footer采用的是fixed定位,如果考虑到更老一些的iOS系统不支持fixed,完全可以吧fixed换成absolute。