IOS中position:fixed吸底时的滑动出现抖动的解决方案
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吸底时的滑动出现抖动的解决方案的更多相关文章
- IOS中position:fixed弹出框中的input出现光标错位的问题
解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...
- 在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...
- 模拟出ios中流行的黑色背景底
[activityIndicatorView setBackgroundColor:[UIColor colorWithRed: green: blue: alpha:0.4]]; 用上面的语法,可以 ...
- CSS中position:fixed的相关用法
CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...
- CSS中position:fixed的用法
我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...
- IE6中position:fixed无效问题解决
在做页面右下脚对话框时,直接使用position:fixed;大部分浏览器很容易就能做到,但是在IE6中却发现不行,原来是IE6不支持position:fixed;这个属性. 虽然用JS肯定能解决这个 ...
- ie7中position:fixed定位后导致margin:0 auto;无效
布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- 偏前端 - ios下position:fixed失效的问题解决
如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:f ...
随机推荐
- Unity3D笔记 英保通四 虚拟轴应用及键盘事件
Input: 1.使用这个类能够读取输入管理器设置的按键,以及访问移动设备的多点触控或加速感应数据.想要读取轴向使用Input.GetAxis方法获取下列默认轴: "Horizontal&q ...
- SVG学习笔录(一)
SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验. HTML体系中,最 ...
- 涨知识,涨知识 :ThinkPHP框架下Where条件查询Mysql数据库某字段是否为空
代码虐我千百遍,我对代码如初恋~ 问题: 查询某字段app_date数据是否为NULL,正常我们实现的办法是: $map['app_data'] = array('eq','null'); $data ...
- swiper监听左滑还是右滑动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 阿里云liunx-ubuntu安装中文
ubuntu安装中文支持--让你的ub真正变成中文作者: 来源:ubuntu在安装的时候会提示选择语言,但选择了中文之后,系统里面还有很多英文并不是ub对中文支持不好 你根本就没有安装中文支持~ 首先 ...
- CH6101 最优贸易【最短路】
6101 最优贸易 0x60「图论」例题 描述 C国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通 ...
- web前端开发笔记(2)
一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...
- Drip is a launcher for the Java Virtual Machine that provides much faster startup times than the java command. The drip script is intended to be a drop-in replacement for the java command, only faster
小结: 1.初始化jvm: 2.第一次唤醒java命令不快,后续快: https://github.com/elastic/logstash Advanced: Drip Launcher Drip ...
- IE8 select 动态下拉遇到的问题
发生背景:经QC测试程序一直没问题,到客户测试竟然出现了下拉窗口失效. 检查发现客户用的IE ,360 浏览器都出现一样的问题,据说360是引用IE的核心. 看下IE版本是 8的..... 开发和Q ...
- oracle(二)V$lock 视图中ID1 , ID2 列的含义
1.在Table Locks(TM)中 ID1为对象的id, ID2为0 在Row Locks(TX)中 ID1为Undo Segmen Number与该事务在该回滚段的事务表(Transaction ...