ios下fixed回复框bug的解决方案
前几天做一个移动端的页面，要加个像微信那样附着在底部的回复框，按照做PC端网页的思路，首先是用fixed，在安卓上测了一下是好的，结果到朋友的iphone6p上就不行了，点击输入框之后它总会跳到屏幕中间去。
后来才知道这是ios下一个普遍的bug，所以我决定把原因和解决方案整理一下，以方便后人。
网上有的人说用那个iscroll.js来解决，不过那样会出现很多样式上的冲突，而且为了一个fixed的bug就动用一个js，未免有点大材小用了。
原因
ios下面，软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。
解决方法
三段式布局
- 代码如下：
<style>
header, footer, main {
display: block;
} header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
} footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
} main {
/* main绝对定位，进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
} main .content {
height: 2000px;
}
/* 元素内的滚动非常不流畅，滑动的手指松开后，滚动立刻停止，失去了原本的流畅滚动特性，给main加上如下代码即可。 */
main {
/* main绝对定位，进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性，可以增加弹性 */
-webkit-overflow-scrolling: touch;
}
</style>
<body class="layout-scroll-fixed">
<!-- fixed定位的头部 -->
<header> </header> <!-- 可以滚动的区域 -->
<main>
<div class="content">
<!-- 内容在这里... -->
</div>
</main> <!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer> </body>可查看我的DEMO
这里是用了absolute来代替fixed效果，这是一个我认为比较好的解决方法，只要看仔细一点就没啥样式冲突问题。
JS监控输入框到屏幕顶的高度
用js监控focus时的高度，然后控制变化，这个会出现回复框停留一段时间的问题。不建议用这种方法，具体代码网上有很多。
iscroll.js
不在万不得已的情况下，我们尽量尝试一下不依赖第三方库的布局方案，注意别冲突掉样式和功能。
ios下fixed回复框bug的解决方案的更多相关文章
- 移动端踩坑之旅-ios下fixed、软键盘相关问题总结
最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关 ...
- 微信小程序在ios下Echarts图表不能滑动的解决方案
问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...
- 关于IOS下click事件委托失效的解决方案
一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...
- 解决IOS下不支持fixed的问题
我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focu ...
- web移动端Fixed在Input获取焦点时ios下产生的BUG及处理
1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...
- ios下,对于position:fixed支持不完美的额解决方案
ios下,当有文本框时,会调用输入法,而这个时候,定位(fixed)在底部的东西,就会被弹上例,离底部有段距离,这算是个坑了. 我的解决方案是这样的. 除了定位在底部的元素外,用一个大div把其他元素 ...
- iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...
- iOS下的 Fixed BUG
input 光标位置乱窜 固定式浮层内的输入框光标会发生偏移.即 fixed 定位的容器中输入框光标的位置显示不正确,没有正常地显示在输入框中,而是偏移到了输入框外面 可触发条件 页面body出现滚动 ...
- ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
随机推荐
- 【ORACLE】特殊的NULL
NULL 是数据库中特有的数据类型 Oracle 中对空的描述 nullAbsence of a value in a column of a row. Nulls indicate missing, ...
- BZOJ4563: [Haoi2016]放棋子
Description 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列,要求你在 这个矩阵上放N枚棋子(障碍的位置不能放棋子),要求你放N个棋子也满足每行 ...
- 运用ASP.NET实现
calation.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; /// ...
- 第 1 章 jQuery 入门
学习要点: 1.什么是 jQuery 2.学习 jQuery 的条件 3.jQuery 的版本 4.jQuery 的功能和优势 5.其他 JavaScript 库 6.是否兼容低版本 IE 7.下载及 ...
- 谢欣伦 - OpenDev原创教程 - 通信开发库libComm
libComm是一个免费的简单的通信库,其中的接口类与函数大都以小写的x打头,来源于我的姓氏首字母(谢欣伦). 下载 Sample using libComm - v1.1 For WinXP lib ...
- 实战Java虚拟机之二“虚拟机的工作模式”
今天开始实战Java虚拟机之二:“虚拟机的工作模式”. 总计有5个系列 实战Java虚拟机之一“堆溢出处理” 实战Java虚拟机之二“虚拟机的工作模式” 实战Java虚拟机之三“G1的新生代GC” 实 ...
- 骑士游历/knight tour - visual basic 解决
在visual baisc 6 how to program 中文版第七章的练习题上看到了这个问题,骑士游历的问题. 在8x8的国际象棋的棋盘上,骑士(走法:一个方向走两格,另一个方向一格)不重复走完 ...
- 手动删除portal中托管服务。
在portal中将server作为托管联合服务器,然后发布了托管服务.若中间取消了托管联合服务器,再重新连接,那么会出现之前的托管服务无法删除的现象. 下文为怎样手动删除这些服务的方法,(不过貌似之后 ...
- 在eclipse中创建一个Maven项目
1. 首先判断eclipse有没有自带Maven Window –> Perferences 如果有Maven,那就是自带了maven插件,如果没有,需要自行安装. 2.配置maven 2.1. ...
- PL/SQL %TYPE和%ROWTYPE的区别【转】
%TYPE: 定义一个变量,其数据类型与已经定义的某个 数据变量的类型相同,或者与数据库表的某个列的数据类型 相同,这时可以使用%TYPE. 使用%TYPE 特性的优点在于: 1.所引 ...