概述

这个问题常出现在移动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失效现象的解决方案的更多相关文章

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

    最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7 ...

  2. 【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼

    前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望 ...

  3. Android中弹出dialog后无法捕捉back键

    一.需求 在Android开发过程中,弹出dialog后无法捕捉back键,点击back按键无响应. 二.解决方案 原因:弹出dialog后,activity失去焦点,dialog获得当前焦点. 解决 ...

  4. ios解决输入框弹出后position:fixed失效问题

    最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题.position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激 ...

  5. ios 弹出键盘 视图向上平移

    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(keyboardwillAppear:) name:U ...

  6. Android中自定义弹出PopupWindow后返回按键失效的问题解决

    PopupWindow出现之后,默认的是所有的操作都无效的,除了HOME键.而且是可以操作后面的界面的.想要锁定后面的界面,很简单,只需要让PopupWindow是focusable的:popupWi ...

  7. wordpress，cos-html-cache静态化后，点击数失效问题的解决方案

    装了wordpress cos-html-cache 静态插件后,生成了静态文件,post-views等点击数插件就失效了, 找了一些,包括有个js版本的,需要用到post-views插件,我也不想装 ...

  8. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  9. 微信内置浏览器H5 弹出键盘 遮盖文本框解决办法 Fixed失效

    if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", functio ...

随机推荐

  1. pyinstaller打包exe文件，运行时一闪而过

    pyinstaller打包exe文件出现命令窗口一闪而过 原因:exe运行过程中出错了,解决这些错误就可以了 解决方法: 通过 cd path >> xxx.exe 在命令行中运行exe文 ...

  2. tar包压缩时相对路径问题

    一.问题描述 现在有一个需求,不知道该如何才能实现压缩: tar -czvf /home/futong/test/logs.tar.gz /home/futong/test/logs 打开压缩包发现 ...

  3. c# 表格控件SourceGrid使用总结

    网上SourceGrid相关的资料很少,使用过程中做了下记录,以便日后查用 1:初始化 this.grid = new SourceGrid.Grid(); this.grid.Size = new ...

  4. 『德不孤』Pytest框架 — 9、Pytest测试报告

    目录 1.pytest-html插件 2.Allure测试报告 (1)Allure框架说明 (2)Allure框架的使用 1.pytest-html插件 Pytest可以通过命令行方式,生成xml/h ...

  5. 渗透测试之BurpSuite工具的使用介绍（三）

    若希望从更早前了解BurpSuite的介绍,请访问第二篇(渗透测试之BurpSuite工具的使用介绍(二)):https://www.cnblogs.com/zhaoyunxiang/p/160002 ...

  6. 4.功能三：实现URL地址栏控制（15分） (1)获取到当前访问的控制器和方法（5分） (2)对当前访问的控制器和方法进行判断，有权限继续访问（5分） (3)无权限给出提示（5分）

    <?php namespace app\admin\controller; use think\Controller; use think\Request; class Base extends ...

  7. LGP2155题解

    lg最优解来写题解啦( 题目大意: 多测: \[\sum_{i=1}^{n!}[\gcd(i,m!)=1] \] 根据 \(\gcd\) 的结论,我们可以得到答案其实是: \[\frac {n!} { ...

  8. ArcGIS对进行数据拓扑修改

    空间数据处理--题目1 土地利用数据每年都在发生变化,故每年都要根据去年的数据进行修改.请根据以下要求,修改A区域的数据并对B区域已做好的数据进行拓扑检查. 一. 数据说明(见"题目1&qu ...

  9. Flink消费kafka

    Flink消费Kafka https://blog.csdn.net/boling_cavalry/article/details/85549434 https://www.cnblogs.com/s ...

  10. Java基础——方法重写

    什么是方法重写? 子类中出现和父类中完全一样的方法声明 什么时候可以进行方法重写? 在子类需要父类的功能的同时,功能主体子类有自己的特有内容时,可以重写,一面沿袭了父类的功能一面又定义了子类特有的内容 ...