ios webview下footer部分fixed失效问题

场景:

如下图所示,一个很正常的页面需求,footer固定在底部,中间为滚动内容区

然后footer的css一般是这样的

footer{
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        ``````
}

实测chrome下没毛病,ios微信浏览器打开也没毛病,但是!!!

在ios给我们开的webview里面,这个footer部分开始“跑”了,

具体情况是,footer在页面滑动的时候也跟着滑动了,等滑动完毕,

footer部分又自动“归位”了,锁定到了底部。是不是很诡异 ···

就IOS的webview有这毛病,

然后就摸索了一个解决方案是把整个body固定高度(屏幕高度),

然后padding-bottom:(footer的高度)。

footer的css就用absolute,定在底部了。

上面的主内容区就overflow-y:scroll;

然后记得在这里加上-webkit-overflow-scrolling: touch;

为了让你在ios上流畅滚动的。

 

避免使用fixed

 

posted @ 2017-07-22 11:27  AlexCZL  阅读(1290)  评论(0编辑  收藏  举报