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. Comet OJ - Contest #4 B题 奇偶性

    题目链接:https://www.cometoj.com/contest/39/problem/B?problem_id=1577 题意:给你一个数列,求L 到 R 区间内 所有数列 (ƒn mod ...

  2. 使用uc进行手机页面调试

    最近使用uc浏览器的时候发现了,一个有趣的现象,就是uc会处理h5web app为全屏,并屏蔽一些手机上的操作,这样就会使web app更加接近本地应用.所以就研究 了一下uc的手机调试. 1.准备工 ...

  3. WebStorage篇

    [WebStorage篇] 用户登录状态.计数器或者小游戏等,但是又不希望用到数据库,就可以利用Web Storage技术将数据存储在用户浏览器中. Web Storage是一种将少量数据存储在客户端 ...

  4. 年底了,该跳槽了,全套高级Java面试题及答案整理~

    又到年底了,又是一轮跳槽季 城外的人想进去,城里的人想出来 为什么离职? 马云说过,要么工资低,要么受了委屈 我想大多数人离职是这个原因 出来混的,跳槽也都是为了更好的生活 干技术的,工资都是跳出来的 ...

  5. vue中wath的源码实现

    前言 阅读本节,需要理解vue的数据驱动原理. 看这样一段代码 new Vue({ data: { msg: 'hello', say: 'hello world', }, watch: { msg( ...

  6. ArcGis基础—shapefile矢量文件与lyr图层文件之间有何区别?

    shapefile (.shp) 是一种矢量数据存储格式,用于存储地理要素的位置.形状和属性. shapefile 存储在一组相关文件中,并包含一个要素类. 图层文件 (.lyr) 是存储源数据集路径 ...

  7. js 正则替换的使用方法

    function compress(source) { const keys = {}; ⇽--- 存储目标key source.replace( /([^=&]+)=([^&]*)/ ...

  8. BBS论坛 home主页与个人站点主页

    五.Home主页与个人站点主页 home首页代码: # views.py视图函数部分代码def home(request): # 将数据库中的所有文章展示到主页 article_list = mode ...

  9. Pregel Master

  10. 加载ubuntu的时候卡在‘SMBus Host Controller not enabled'错误

    实验系统:ubuntu-16.04.6-server-amd64 我在VMware安装完这个系统后进入发现卡在了’SMBus Host Controller not enabled‘里,后来查过网络发 ...