解决办法(还未测试):

只需要在中间部分外层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. 使用gdbserver远程调试

    使用gdbserver远程调试   1.默认crosstool交叉编译器没有自带gdbserver,需要自行编译 到GNU官方FTP下载,目前最新版的是gdb-6.7.1下载地址:http://ftp ...

  2. Flask框架(1)-程序基本结构

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

  3. js中的jsonp

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. NUC972 linux 烧录

    节介绍如何刻录uboot.kernel和文件系统到NAND Flash, 并且设定NUC970系列芯片从NAND Flash中开机.本节操作需要windows环境下进行.(初次连接电脑需要安装驱动) ...

  5. php 公历阴历互相转换

    <?php /** * Created by PhpStorm. * User: timeless * Date: 17-3-9 * Time: 上午9:32 */ class Lunar { ...

  6. 四、K3 Cloud 开发插件《K3 Cloud事件、方法、函数》

    1.简单帐表/动态表单几个主要事件 //初始化 public override void Initialize() //构建动态列 public override BOS.Core.Report.Re ...

  7. 《Thinkphp5使用Socket服务》 入门篇

    上车啦!!! 今天来说一下thinkphp5.0下使用wokerman的socket服务. 安装: composer的安装方法,Windows下直接下个composer的应用程序,双击安装,环境变量同 ...

  8. MSSQL 将大表改成已分区表

    --select * from sys.partition_functions --select * from sys.partition_range_values use [UpdateLog] g ...

  9. [No0000131]WCF压缩传输方案整理

    1.WCF进阶:将编码后的字节流压缩传输 2.通过WCF扩展实现消息压缩 3.WCF 消息压缩性能问题及解决方法

  10. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题