IOS键盘弹出导致fixed定位错位

整   理:晋 哲

时   间:2017-01-06

说   明:主要是input的焦点事件触发弹出键盘导致fixed定位失效,安卓没有该bug

方法一:使用absolute模拟fixed
1、当触发事件时,将固定定位的元素设置为【position:absolute;top:0;】
若页面高度一屏之内,则事件结束后还原样式即可;若页面很长则继续下一步

2、当页面滚动时,添加滚动事件,更新top值,使其看似一直在顶部

window.onscroll=function(){
    $(".fixed").css("top",$(window).scrollTop());
}

缺点:因为top值时实时计算的,页面滚动时,会有缓冲时间。

方法二:将溢出内容部分设置内部滚动,设置样式【…height:100vh;overflow:auto;】
因为键盘弹出时fixed失效,元素的位置自动根据scrollTop滚动的距离去定位,所以当页面高度为屏幕高度时,系统自动的定位也就在顶部了。

优点:该方法不需要再去设置复杂的js,仅设置样式即可,也是最常用的方法。

缺点:正常情况下是没有问题的,需注意的是商品列表中商品图片使用了lazyload.js,当内容部分设置overflow后,懒加载就失效了,因为它默认是整段body进行滚动监听的。解决方法:lazyload.js有参数【container】可以设置内部框架懒加载的。

解决前:
pic1

解决后:
pic2

发表评论