天天看点

js移动端那些事儿之fixed定位

在移动端里如果页面底部有fixed 元素,当有input输入框触发键盘时,可能会引发一系列问题。说说我今天遇到的一个问题,我需要在移动端微信内置浏览器页面底部,设置一个固定栏,不能随着页面滚动而滚动。

js移动端那些事儿之fixed定位
js移动端那些事儿之fixed定位

andriod调整的时候,当点击input获取焦点时,固定栏会随着输入框一起上浮,在输入框顶部,布局被打乱,解决方案就是获取焦点的时候隐藏固定栏,失焦的时候再出现。ios出现的问题却是不一样的,input获取焦点的时候固定栏并不会上浮,会很老实待在底部,然后当我输入内容点击确定的时候(也就是input失焦情况下),固定栏在输入框消失的那瞬间,闪现在输入框顶部,之后再恢复到底部。这就是一个bug,只好继续查找解决方案,最后就是在input失焦的时候,给ios修改属性position,把fixed改成absolute,如此一来就不会出现上述问题了。

js移动端那些事儿之fixed定位

继续阅读