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 上滑下拉抖动的更多相关文章

  1. Swiper 判断上滑下拉操作

    onTouchMove: function(swiper){ //手动滑动中触发//判断上滑下拉var i = mySwiper.translate;setTimeout(function() {va ...

  2. js实现页面的上滑下拉功能

    这两天做项目,用到了上滑和下拉的功能,主要是通过监听touchmove,touchstart,touchend三个事件去判断页面上滑状态还是下拉状态. 同时加一个知识点:有时在监听时会报错,这个错是这 ...

  3. iOS开发 XML解析和下拉刷新,上拉加载更多

    iOS开发 XML解析和下拉刷新,上拉加载更多 1.XML格式 <?xml version="1.0" encoding="utf-8" ?> 表示 ...

  4. iOS开源项目推荐|下拉刷新

    MJRefresh - 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明. CBStoreHouseRefresh ...

  5. 浅谈对MJRefresh(上)下拉刷新控件的理解

    MJRefresh GitHub地址:https://github.com/CoderMJLee/MJRefresh 利用业余时间研究了一下iOS的开发,发现OC特定的语法方式吸引了我,而且iOS开发 ...

  6. [转]position:fixed; 在IE9下无效果的问题

    本文转自:http://www.cnblogs.com/xinwang/archive/2013/04/06/3002384.html 平常DIV+CSS布局时,position属性一般用absoul ...

  7. iOS: 悬浮的条件筛选下拉框的使用

    1.介绍 app中条件筛选视图是很常用的功能,一般它搭配着tableView的表头悬浮滚动使用,点击按钮时,就会弹出下拉框显示条件,选择一个条件后,下拉框自动隐藏. 2.效果图如下 从中间点击弹出,然 ...

  8. jsp页面上的下拉框案例(Struts2)

    <s:select></s:select>包含的属性有:list=""  :name=""  :value=""   ...

  9. 模态框在IE下的问题,即position:fixed在IE下不兼容的处理方式

    项目中遇到的问题,模态框在IE下总出现如图所示双层遮罩框,经排查发现是由于bootstrap里写的modal的样式里position:fixed不兼容IE的原因,导致铺不满整个窗口. 解决方案:在项目 ...

随机推荐

  1. CSS:CSS 图像透明/不透明

    ylbtech-CSS:CSS 图像透明/不透明 1.返回顶部 1. CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 更多 ...

  2. (3)Redis conifg

    redis.windows-service.conf      Redis-x64-3.2.100 # Redis configuration file example # Note on units ...

  3. Flink 编程模型

    抽象层次   levels_of_abstraction 最低级的抽象接口是状态化的数据流接口(stateful streaming).这个接口是通过 ProcessFunction 集成到 Data ...

  4. 剑指offer——04二维数组中的查找

    题目: 数组中唯一只出现一次的数字.在一个数组中除一个数字只出现一次之外,其他数字都出现了三次.请找出那个只出现一次的数字. 题解: 如果一个数字出现三次,那么它的二进制表示的每一位(0或者1)也出现 ...

  5. VSCode运行JavaScript代码

    方式一(推荐): 安装插件 open in window, 然后option+b

  6. python的三种特性

    1.封装 什么时候用函数? 各个函数之间是独立的且无共用的数据. 什么时候用类? 函数之间是相关的,且有共用的数据,则可以使用类来封装. 所谓的封装: (1)使用构造方法将内容封装到 对象 中. (2 ...

  7. OpenResty实现限流的几种方式

      在开发 api 网关的时,做过一些简单的限流,比如说静态拦截和动态拦截:静态拦截说白了就是限流某一个接口在一定时间窗口的请求数.用户可以在系统上给他们的接口配置一个每秒最大调用量,如果超过这个限制 ...

  8. (Struts2学习系列三)Struts2动态方法调用:通配符方式

    更改src/struts2.xml的代码: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...

  9. 随笔记录 误删boot恢复 2019.8.7

    系统还原: 1. 2. 3. 4. 5.进入硬盘 6.挂载光盘,安装恢复boot 7.安装grub2 8.重建grub.cfg文件  

  10. python编程学习day04

    1.函数名是变量名 “=”是内存指向,等号赋值操作,内存指向操作 变量——可赋值,可作为列表元素 函数名可以作为返回值返回 函数名可作为参数传递 2.闭包 内层函数使用了外层函数的变量 作用:可以让一 ...