解决办法(还未测试):

只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。可拷贝下面代码运行。
<!DOCTYPE html>

<html lang="zh_cmn">

<head>

<meta charset=utf-8 />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

<title></title>

<style>

.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;}

.head{top:0;}

.foot{bottom:0;}

.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;}

</style>

</head>

<body>

<header class="head">顶部固定区域</header>

<article class="main"  id="wrapper">

<div>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<p>当内容欲出隐藏时，灰色区域可上下拖动</p>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

<input type="text" value="" class="inputtext"> <br>

content <br>

content <br>

content <br>

content <br>

content <br>

content <br>

content <br>

content <br>

content <br>

</div>

</article>

<footer class="foot">底部固定区域</footer>

</body>

</html>
当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部

IOS 键盘弹出导致的position:fixed 无效问题的更多相关文章

  1. h5页面ios键盘弹出收起后页面底部留白问题

    <input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...

  2. iOS 键盘弹出遮挡输入框

    #pragma mark 键盘弹出遮挡输入框 //开始编辑输入框的时候,软键盘出现,执行此事件 -(void)textFieldDidBeginEditing:(UITextField *)textF ...

  3. H5页面IOS中键盘弹出导致点击错位的问题

    IOS在点击输入框弹出键盘  键盘回缩 后 定位没有相应改变  还有  textarea 也会弹出键盘 $("input").blur(function() { console.l ...

  4. iOS:键盘弹出和收起的通知使用

    介绍:不论是UITextField,还是UITextView,使用它们输入文字时都是有键盘的弹出,此时可能会挡住我们创建的一分部其他视图,此时,就需要根据键盘的高度将我们被隐藏的部分View做向上或者 ...

  5. IOS键盘弹出、隐藏

    IOS键盘 UIKeyboardFrameBeginUserInfoKey:动画开始前键盘的size UIKeyboardFrameEndUserInfoKey:动画结束后键盘的size - (voi ...

  6. flutter 防止键盘弹出 导致超出屏幕

    return Scaffold( appBar: AppBar( elevation: 0.0, title: new Text("登陆"), ), resizeToAvoidBo ...

  7. 处理ios键盘弹出按钮点击click失效

    用ontouchstart绑定事件即可,然后用 document.activeElement.blur();让键盘收起 this.value = value.replace(/\s/g, " ...

  8. ios11，弹出层内的input框光标错位 键盘弹出时，输入信息，光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  9. js 移动端之监听软键盘弹出收起

    js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...

随机推荐

  1. akka cluster sharding

    cluster sharding 的目的在于提供一个框架,方便实现 DDD,虽然我至今也没搞明白 DDD 到底适用于是什么场合,但是 cluster sharding 却是我目前在做的一个 proje ...

  2. Flask框架（1）-程序基本结构

    1. 安装Flask 1.1 安装虚拟环境 mkdir myproject cd myproject py -3 -m venv venv #Linux系统: python3 -m venv venv ...

  3. Linux 磁盘管理命令

    df NO1. 显示所有存储系统空间使用情况,同时显示存储系统的文件系统类型s[root@rehat root]# df -aT NO2. 显示指定文件系统的空间使用情况[root@rehat roo ...

  4. 网络通信协议之ICMP

    ICMP(互联网控制消息协议) ICMP >>Internet Control Message Protocol IP协议的缺点: >>无差错报告和差错纠正机制 >> ...

  5. [No0000154]详解为什么32位系统只能用4G内存.

    既然是详解, 就从最基础的讲起了. 或者1来存储数据的, 所以Bit实际上可以看成存放1个二进制数字的1个位置.也就是说bit只有2种值, 0 或者 1, 所以1个bit能存放1个布尔类型的值(boo ...

  6. [No0000C8]英特尔快速存储IRST要不要装

    IRST (英特尔快速存储技术)Intel Rapid Storage Technology(简称IRST)又称英特尔快速存储技术. Intel Rapid Start Technolog同样是简称( ...

  7. tensorRT使用python进行网络定义

  8. Rodrigues Formula

    https://en.wikipedia.org/wiki/Rodrigues%27_formula https://en.wikipedia.org/wiki/Rodrigues%27_rotati ...

  9. [hardware][intel] intel全系列网卡调研

    除了公司用,我自己还要买一块家用. 但是在这一切开始之前,还需要搞清楚PCIE到底咋回事. 一, 总线 https://zh.wikipedia.org/wiki/%E6%80%BB%E7%BA%BF ...

  10. DBGridEh使用指南改变边框颜色

    DBGridEh使用指南 鹅倌0人评论422人阅读2012-08-06 15:17:59   1.设置表头,是否允许多表头,设置是否只读. dbgrdh1.TitleFont.Color:=clBlu ...