H5方法:

//吸顶头部
.header{
width:100%;
height:50px;
position:fixed;
top:0px;
}
//main滑动区域
.main{
width:100%;
height:auto;
position:absolute;
padding-top:50px;
padding-bottom:50px;
box-sizing:border-box;
overflow-y:scroll;
}
//吸底尾部
.footer{
width:100%;
height:50px;
position:fixed;
bottom:0px;
}

ios原生方法:

前端开发人员会在app中打开webview,这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动,整个viewport跟着动,所以可以在生成schema的时候将参数bounce_disable(可能不一定都有这个参数,就看有没有类似的参数进行控制)设置为1禁止native的弹性效果,然后加上h5的这个效果,-webkit-overflow-scrolling 属性可以帮我们实现这个效果,它控制元素在移动设备上是否使用滚动回弹效果。

IOS中position:fixed吸底时的滑动出现抖动的解决方案的更多相关文章

  1. IOS中position:fixed弹出框中的input出现光标错位的问题

    解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...

  2. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  3. 模拟出ios中流行的黑色背景底

    [activityIndicatorView setBackgroundColor:[UIColor colorWithRed: green: blue: alpha:0.4]]; 用上面的语法,可以 ...

  4. CSS中position:fixed的相关用法

    CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...

  5. CSS中position:fixed的用法

    我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...

  6. IE6中position:fixed无效问题解决

    在做页面右下脚对话框时,直接使用position:fixed;大部分浏览器很容易就能做到,但是在IE6中却发现不行,原来是IE6不支持position:fixed;这个属性. 虽然用JS肯定能解决这个 ...

  7. ie7中position:fixed定位后导致margin:0 auto;无效

    布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...

  8. css中position:fixed实现div居中

    上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...

  9. 偏前端 - ios下position:fixed失效的问题解决

    如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:f ...

随机推荐

  1. node中非常重要的process对象,Child Process模块

    node中非常重要的process对象,Child Process模块Child Process模块http://javascript.ruanyifeng.com/nodejs/child-proc ...

  2. 【笔记】javascript权威指南-第三章-类型,值和变量

    javascript中的原始类型和对象类型(基本类型和引用类型) //本书是指:javascript权威指南    //以下内容摘记时间为:2013.7.27   计算机程序运行时需要对值(value ...

  3. python3+socket搭建简易服务器

    踩了一上午的坑之后,终于对网络编程有了一点大致的.基本的了解.真的是0基础,之前对socket网络编程一点都不知道.(感觉自己与时代脱轨....) 首先我想对这些美妙的专业术语进行一番搜索: 服务器: ...

  4. Java、JavaWeb中单元测试用到的测试方法

    写出的代码做单元测试时,一定要记住从三个方面出发:1.成功  2.异常  3 逻辑错误(即没有异常也可能程序运行出最后结果,可是呢?呵呵).这就是在做测试时我要牢记的三个方面,同时思维要严谨也即做事要 ...

  5. OpenCV Save CvRect to File 保存CvRect变量到文件

    在OpenCv中,我们有时候需要查看CvRect变量的值,我们可以通过将其保存到文件来查看,保存的代码如下: void writeCvRectToFile(CvRect &rect, cons ...

  6. 专访知乎张伟:RFC技术评审机制如何助力知乎实现工程文化落地

    2017年5月20-21日,MPD工作坊·上海站将于上海徐汇区光大会展中心举办,本届MPD工作坊请到了知乎工程高级总监张伟进行主题为<工程师文化落地6项指南>的3小时深度分享.在工作坊举办 ...

  7. POJ 3067 - Japan - [归并排序/树状数组(BIT)求逆序对]

    Time Limit: 1000MS Memory Limit: 65536K Description Japan plans to welcome the ACM ICPC World Finals ...

  8. MySQL ·InnoDB 文件系统之文件物理结构

    从上层的角度来看,InnoDB层的文件,除了redo日志外,基本上具有相当统一的结构,都是固定block大小,普遍使用的btree结构来管理数据.只是针对不同的block的应用场景会分配不同的页类型. ...

  9. cocoapods卸载与安装

    引用自:https://www.aliyun.com/jiaocheng/389907.html 一.首先卸载pod which pod 得到pod的路径 sudo rm -rf <pod的路径 ...

  10. SAPI

    https://en.wikipedia.org/wiki/Server_Application_Programming_Interface In computing, Server Applicat ...