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. Android 应用内切换语言

    extends :http://bbs.51cto.com/thread-1075165-1.html,http://www.cnblogs.com/loulijun/p/3164746.html 1 ...

  2. Unity3D笔记 愤怒的小鸟<二> 实现Play界面

    创建Play界面.能个把各个图片组合成一个场景,场景组成后背景能够不停的滚动,当鼠标单击时显示图片手型鼠标 一.GUI Texture 1.创建背景.地面.树木.草 ,这里注意Z轴的排序,一层一层则第 ...

  3. ElasticSearch在linux上安装部署(转)

    一.安装准备工作安装参考文档: ELK官网:https://www.elastic.co/ ELK官网文档:https://www.elastic.co/guide/index.html ELK中文手 ...

  4. 如何取消一个目录的git初始化

    一不小心把我的整个home目录都初始化为git仓库了,通过执行删除.git命令,可以恢复 rm -rf .git

  5. JavaScript ES6 规范

    ES6 简介 ECMAScript 6 简称 ES6,是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程 ...

  6. python中的字符串切片

    python中的字符串切片,似乎有点乱,例如: >>>pystr='Python' >>>pystr[2:5] 就会输出 'tho' 这该怎样理解呢?中括号[2:5 ...

  7. 2018牛客网暑期ACM多校训练营(第五场) F - take - [数学期望][树状数组]

    题目链接:https://www.nowcoder.com/acm/contest/143/F 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K ...

  8. Django模板的加深

    网站模板的设计,一般的,都有一些通用的设计,有导航.底部.统计等相关代码:nav.html.bottom.html.tongji.html 在我前面Django工程的基础上建立一个base.html包 ...

  9. LAMP下安装zabbix流水

    一.安装zabbix (1)创建用户和组 [root@dbking zabbix-2.2.1]# groupadd zabbix [root@dbking zabbix-2.2.1]# useradd ...

  10. pro 图层 叹号

    同事遇到问题,后来他自己探索解决了~~大致记录如下 pro1.4中打开mxd,部分图层前显示叹号.根据arcmap的经验,点击叹号去修复,结果显示 不支持类型数据. 后解决办法:新建pro 的proj ...