ios position:fixed 上滑下拉抖动
ios position:fixed 上滑下拉抖动
最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上会出现上滑或者下拉的时候头部或者底部被带下来,然后过一会自己在滑上去,感觉很卡顿,感官很不好,最后发现是position:fixed的兼容问题
百度找了两个方案分别用了一下
方案一
transform: translateZ(0); -webkit-transform: translateZ(0);
解释:在使用position:fixed的元素上加上该属性。
但是这个我写了并没有奏效,按照他的用法,不知道是不是我写的问题,也是很郁闷了
方案二
页面布局
<header></header>//头部置顶 <div></div> //中间滚动 <footer></footer>//底部置底
css
header{
position:fixed;
top:;
}
div{
position:absolute;
overflow-y:scroll;
}
footer{
position:fixed;
bottom:;
}
好了,完美解决问题
ios position:fixed 上滑下拉抖动的更多相关文章
- Swiper 判断上滑下拉操作
onTouchMove: function(swiper){ //手动滑动中触发//判断上滑下拉var i = mySwiper.translate;setTimeout(function() {va ...
- js实现页面的上滑下拉功能
这两天做项目,用到了上滑和下拉的功能,主要是通过监听touchmove,touchstart,touchend三个事件去判断页面上滑状态还是下拉状态. 同时加一个知识点:有时在监听时会报错,这个错是这 ...
- iOS开发 XML解析和下拉刷新,上拉加载更多
iOS开发 XML解析和下拉刷新,上拉加载更多 1.XML格式 <?xml version="1.0" encoding="utf-8" ?> 表示 ...
- iOS开源项目推荐|下拉刷新
MJRefresh - 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明. CBStoreHouseRefresh ...
- 浅谈对MJRefresh(上)下拉刷新控件的理解
MJRefresh GitHub地址:https://github.com/CoderMJLee/MJRefresh 利用业余时间研究了一下iOS的开发,发现OC特定的语法方式吸引了我,而且iOS开发 ...
- [转]position:fixed; 在IE9下无效果的问题
本文转自:http://www.cnblogs.com/xinwang/archive/2013/04/06/3002384.html 平常DIV+CSS布局时,position属性一般用absoul ...
- iOS: 悬浮的条件筛选下拉框的使用
1.介绍 app中条件筛选视图是很常用的功能,一般它搭配着tableView的表头悬浮滚动使用,点击按钮时,就会弹出下拉框显示条件,选择一个条件后,下拉框自动隐藏. 2.效果图如下 从中间点击弹出,然 ...
- jsp页面上的下拉框案例(Struts2)
<s:select></s:select>包含的属性有:list="" :name="" :value="" ...
- 模态框在IE下的问题,即position:fixed在IE下不兼容的处理方式
项目中遇到的问题,模态框在IE下总出现如图所示双层遮罩框,经排查发现是由于bootstrap里写的modal的样式里position:fixed不兼容IE的原因,导致铺不满整个窗口. 解决方案:在项目 ...
随机推荐
- Java-Class-@I:lombok.extern.slf4j.Slf4j
ylbtech-Java-Class-@I:lombok.extern.slf4j.Slf4j 1.返回顶部 2.返回顶部 1. package com.ylbtech.api.controlle ...
- dom读写xml
package com.xml; import java.io.File; import java.io.IOException; import javax.xml.crypto.dsig.Trans ...
- flink中对于window和watermark的一些理解
package com.chenxiang.flink.demo; import java.io.IOException; import java.net.ServerSocket; import j ...
- hql 语法与详细解释
HQL查询: Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(Hibernate Query Lanaguage)查询提供了更加丰富的和灵活的查询特性,因此 Hi ...
- 用js onselectstart事件鼠标禁止选中文字
禁止鼠标选中文本,针对不同浏览器有不同的写法.常见的是onselectstart表示禁止鼠标选中文本.其中用js可以在页面中写 onselectstart="return false&quo ...
- 高级UI晋升之常用View(三)上篇
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将先从以下两个内容来介绍常用View: [RecycleView] [Ca ...
- 净心诀---python3生成器
生成器的作用----减少程序运行的内存开销 生成器特点: 1.一个一个的取值,而不是一次性把所有数据创建出来,迭代器中的数据不取不创建2.只能按照顺序取,不能跳过也不能回头3.一个迭代器中的数据只能从 ...
- CentOS 7 用 yum 安装 Nginx
在 CentOS 7 中,直接使用 yum 安装 Nignx 会提示无下载源.因此,需要添加 Nginx 的下载源到 yum: sudo rpm -Uvh http://nginx.org/packa ...
- 响应断言和json asstion
1.要勾选Additionallly assert value才可以输入下面的预期结果哦
- jq-demo-2种吸顶效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...