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

Posted 前端学习123321123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IOS中弹出键盘后出现fixed失效现象的解决方案相关的知识,希望对你有一定的参考价值。

概述

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

解决方法

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

DOM

<html>
    <body>
        <div class=".wrap">
            <div class=".position"></div>
        </div>
    </body>
</html>

CSS

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

注释

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



以上是关于IOS中弹出键盘后出现fixed失效现象的解决方案的主要内容,如果未能解决你的问题,请参考以下文章

ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

apicloud问题解决记录键盘弹出监听处理以及头部底部的黑色闪屏现象

iOS下的 Fixed + Input(时间日期选择select 选择等等) 出现的问题

Web移动端Fixed布局的解决方案

Web移动端Fixed布局的解决方案

[转] Web移动端Fixed布局的解决方案