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. thinkphp---部署在IIS8.0服务器上

    最近做了一个项目,使用的是我自己基于thinkphp开发的一套CMS,由于我本地使用的都是apche的环境,即使是线上环境用的也是宝塔面板,但是现在要将thinkphp的系统部署在IIS8.0的环境下 ...

  2. cas 单点登录 --自定义审计日记@Audit()

    错误信息: org.springframework.webflow.execution.ActionExecutionException: Exception thrown executing [An ...

  3. nginx中location、rewrite用法总结

    一.location用法总结 location可以把不同方式的请求,定位到不同的处理方式上. 1.location的用法 location ~* /js/.*/\.js 以 = 开头,表示精确匹配:如 ...

  4. HDU-1881 毕业bg (01背包变形)

    毕业bg Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  5. 2018牛客网暑期ACM多校训练营(第二场) A - run - [DP]

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

  6. Frogger--poj2253

    http://poj.org/problem?id=2253 题意:The frog distance (humans also call it minimax distance) between t ...

  7. 【Python】if相关知识点

    1.9选课中心前两页课程名称打印到固定系统文件夹的某个csv文件中. #-*- coding: UTF-8 -*- #coding==utf-8 #from selenium.webdriver.su ...

  8. 将你的wordpress博客添加到百度个性首页

    当你登陆百度账号后,进入百度首页会显示新的个性首页,不仅仅有搜索框,下面还有一个小型导航,放着你经常去的网站. 百度提供了一键添加到百度首页的按钮代码. 首先,先打开分享到百度新首页代码申请页面:ht ...

  9. mysql 开启profiling

    mysql 开启profiling

  10. 如何解决win8系统下卸载软件出现错误代码为2502和2503的问题

    1.首先打开任务管理器,可以通过右键点击桌面上的任务栏打开任务管理器,也可以通过同时按下键盘上的Ctrl+Alt+Delete键打开任务管理器. 2.打开任务管理器后,切换到“详细信息”选项卡,找到e ...