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

时间 2019-12-04

标签 ios 弹出键盘出现 fixed 失效现象解决方案栏目 iOS 繁體版

原文原文链接

概述

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

解决方法

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

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;
}

注释

其实这个问题有不少插件能够解决，可是我的认为有时候不是非用插件不可的状况下不必使用插件，一是影响页面性能，二是我有代码洁癖能够吗？
好吧开个玩笑~想必看到这里问题已经解决了，若是没有请在下方留言，很欢迎你们参与交流，互相学习。移动web开发