概述

这个问题常出现在移动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. Chrome：查看用户代理User-Agent

    用户代理(User-Agent)是浏览器客户端与服务器交互时的重要信息之一,用于帮助服务器识别请求用户的浏览器类别,以便于网站发送相应的网页数据. 用户代理数据包括:操作系统标识.加密等级标识和浏览器 ...

  2. Phoenix使用

    目录 Phoenix连接 Phoenix常用命令 表映射 视图映射 表映射 Phoenix二级索引 开启索引支持 全局索引 创建索引后 创建多条件索引后 本地索引 覆盖索引 总结 Phoenix JD ...

  3. zabbix服务端的部署及zabbix简单介绍

    Zabbix企业级监控方案--服务端部署 Zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix 能监视各种网络参数,保证服务器系统的安全运营 ...

  4. laravel 5.6 API 接口开发限制接口访问频率

    在laravel 5.6及以上版本中框架中已自带ThrottleRequests,但是为了更好的处理消息,我们可以再新加一个中间件,来更方便的处理相应信息 第一步: php artisan make: ...

  5. git常用命令及问题

    Git基本操作 git init 创建新的git仓库 git clone [url] 使用 git clone 拷贝一个 Git 仓库到本地 git status 查看工作区 git stash li ...

  6. RENIX板卡V2-100G系列工作模式速率切换——网络测试仪实操

    本文主要介绍了RENIX板卡V2-100G系列工作模式速率切换相关操作.全文分为五部分内容.文章开头对V2-100G系列板卡进行了概述,之后分别详细介绍了100G工作模式.40G工作模式.25G工作模 ...

  7. 前端（react）上传到阿里云OSS存储 实例

    需求背景 由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储. 阿里云OSS 阿里云OSS文档介绍,这里不做过多赘述 安装 原本 ...

  8. ASP.NET Core框架探索之Authorization

    今天我们一起来探索一下ASP.NET Core框架中的Authorization.我们知道请求进入管道处理流程先会使用Authentication进行用户认证,然后使用Authorization进行用 ...

  9. redis哨兵功能

    redis哨兵功能 redis-Sentinel(哨兵) 前言 当用redis作master-slave的高可用时,如果master本身宕机,redis本身或者客户都没有实现主从切换的功能 redis ...

  10. 06分频计数器之LED闪烁1

    一设计功能是:让LED灯每1秒亮一次,再灭一秒,闪烁时间周期为2秒. 二分频的介绍: (一)设计方式:IP核和自己动手写. (二)对于分频的构成:一个是计数器,还有时钟翻转.方法一是计满整个周期,一半 ...