IOS中弹出键盘后出现fixed失效现象的解决方案

YorkChen 发布于2019-08-30 13:05 / 2700人阅读

摘要：概述这个问题常出现在移动开发中聊天或者留言页面的绝对定位输入框上，页面超过屏幕大小时候输入框状态下键盘弹出绝对定位的元素失效，导致页面滚动时候把定位元素一并带走，体验十分不好，在此留下一自己的方法，让更多的人不需要再爬这样的小坑。

概述

这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上，页面超过屏幕大小时候输入框focus状态下（键盘弹出）绝对定位的元素失效，导致页面滚动时候把定位元素一并带走，体验十分不好，在此留下一自己的方法，让更多的人不需要再爬这样的小坑。

解决方法

原理很简单，就是定义一个外框把页面包起来，把需要使用fixed定位的元素设置成absolute定位，然后设置外框元素的样式为overflow-y:scroll即可，下面是实例：
假设外框元素为.wrap，需要fixed定位的元素为.position：

DOM

CSS

html, body, .wrap {
    width: 100%;
    height: 100%;
}
.wrap {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; //因为使用overflow滚动体验不如正常的页面滚动，加上这个样式以后滚动即会变得顺滑
}
.position {
    position: absolute;
}

注释

其实这个问题有很多插件可以解决，但是个人认为有时候不是非用插件不可的情况下没必要使用插件，一是影响页面性能，二是我有代码洁癖可以吗？
好吧开个玩笑~想必看到这里问题已经解决了，如果没有请在下方留言，很欢迎大家参与交流，互相学习。

云服务器 GPU云服务器 ios6出现的漏洞 js混淆后失效 ajax 后js失效 iOS键盘切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115303.html

IOS中弹出键盘后出现fixed失效现象的解决方案

摘要：概述这个问题常出现在移动开发中聊天或者留言页面的绝对定位输入框上，页面超过屏幕大小时候输入框状态下键盘弹出绝对定位的元素失效，导致页面滚动时候把定位元素一并带走，体验十分不好，在此留下一自己的方法，让更多的人不需要再爬这样的小坑。概述这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上，页面超过屏幕大小时候输入框focus状态下（键盘弹出）绝对定位的元素失效，导致页面...

xcc3641 2019-08-02 15:55 评论0 收藏0
safari浏览器fixed后，被软键盘遮盖的问题—【未解决】

摘要：浏览器后，被软键盘遮盖的问题，已经有好多人问相关的问题，应该是问的角度不一样，还的再次提出咯。如上循环，问题无法解决。 safari浏览器fixed后，被软键盘遮盖的问题，已经有好多人问相关的问题，应该是问的角度不一样，还的再次提出咯。问题描述测试环境：ios 10.2/10.3 简单来说就是在html5页面中底部有个fixed的区域，如图 showImg(https://segm...

miya 2019-08-29 12:19 评论0 收藏0
(2016-11-04完美解决)移动端iOS第三方输入法遮挡底部input及android键盘回落后

摘要：问题概述问题移动端输入框键盘唤起后定位好的元素跟随页面滚动了起来属性失效了满屏任性横飞如下图问题有第三方输入法的机还会出现键盘弹出延迟，导致普通布局输入框等位置靠下的被键盘挡住如下图这个完成出来然后键盘再顶起完美解决方案在输入框获取焦点问题概述问题1：H5 web 移动端输入框, 键盘唤起后fixed定位好的元素跟随页面滚动了起来… fixed属性失效了！满屏任性横飞, 如下图:...

Simon 2019-08-21 14:15 评论0 收藏0