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 ...
随机推荐
- Springmvc配置文件application.xml 和 spring-servlet.xml
文章来源:http://blog.csdn.net/tengdazhang770960436/article/details/48395885 1.SpringMVC 的配置分为两部分 applica ...
- Thinkphp---自定义服务类!
考虑到有些功能是复用的,可以将一些复用的功能放到一个服务里面公用! 例如:公共模块新建一个服务类: 示例: <?php namespace Common\Service; // use Thin ...
- 企业案例(一):由于mysql sleep线程过多小故障
1.什么是长连接 长连接是相对于通常的短连接而说的,也就是长时间保持客户端与服务端的连接状态. 通常的短连接操作步骤是: 连接->数据传输->关闭连接: 而长连接通常就是: 连接-> ...
- python----字符编码与文件处理
字符编码 计算机工作就要通电,也就是说‘电‘驱使计算机干活,而电只有高电压(二进制1),低电压(二进制0),也就是说计算机只认数字. 编程的目的就是让计算机干活,编程的结果就是一堆字符,也就是我们编程 ...
- Python 文件内容读取
# 读取数据的函数 def readData(filename): with open(filename, 'r') as f: data = f.read().lower() data = list ...
- iOS - 互斥锁&&自旋锁 多线程安全隐患(转载)
一.多线程安全隐患 资源共享 一块资源可能会被多个线程共享,也就是多个线程可能会访问到一块资源 比如多个线程访问同一个对象,同一个变量,同一个文件. 当多线程访问同一块资源的时候,很容易引发数据错乱 ...
- CSS分列等高
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- MySQL字符集的一个坑
MySQL字符集的一个坑 http://imysql.com/2013/10/29/misunderstand-about-charset-handshake.shtml MySQL字符集的一个坑 1 ...
- 11.sklearn.preprocessing.LabelEncoder的作用
In [5]: from sklearn import preprocessing ...: le =preprocessing.LabelEncoder() ...: le.fit(["p ...
- POJ1258:Agri-Net(最小生成树模板题)
http://poj.org/problem?id=1258 Description Farmer John has been elected mayor of his town! One of hi ...