【原】IOS兼容性之APP内fixed定位头部跳动
兼容现象:
在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本里边,问题来了,当我们快速滑动页面的时候,页面滚动期间,这个fixed定位的头部会随着页面的滑动滑上去,等到上滑动作执行完毕时,头部才又出现。这个问题在安卓及ios11以下的版本都是没有的。
解决:
直接将这个页面控制在一个盒子里边去滑动,头部相对于这个盒子进行绝对定位。但是这样写带来的副作用就是除类名为wrapper的元素外,其他元素的scrollTop属性值总是0。
<div class="box" style="position:absolute;top;0;left:0;right:0;bottom:0;-webkit-overflow-scrolling:touch;">
<div class="head" style="position:absolute;top;0;left:0;right:0;">Head</div>
<div class="wrapper" style="position:absolute;top;0;left:0;right:0;bottom:0;overflow-y:scroll;">
<div class="content">
<p>para</p>
...
<p>para</p>
</div>
</div>
</div>
- 2018/1/24更新 -
后来在项目中发现,这么处理,会引发另外一个问题,快速滑动页面,头部是固定了,没有问题了,但是 .content 里边的内容会消失,导致页面在滑动的时候,里边的东西是空白的,上滑和下滑均是如此,因此还需要做另外一个处理,,给 .content 或.content里边的子元素加上 overflow-y:hidden,这样页面在快速滑动的时候,里边的内容就不会消失了。
【原】IOS兼容性之APP内fixed定位头部跳动的更多相关文章
- IOS IAP APP内支付 Java服务端代码
IOS IAP APP内支付 Java服务端代码 场景:作为后台需要为app提供服务,在ios中,app内进行支付购买时需要进行二次验证. 基础:可以参考上一篇转载的博文In-App Purcha ...
- IE11下使用fixed定位时鼠标滚动不平滑
很久不用IE了,近期做兼容性测试发现一个fixed定位的问题,当元素使用fixed定位时,其应该不随页面滚动,在chrome/firefox/edge下都很完美,元素完全不动,但是使用IE11时,如果 ...
- iOS开发——iOS国际化 APP内语言切换
最近一个一直在迭代的老项目收到一份新的开发需求,项目需要做国际化适配,简体中文+英文.由于项目中采用了storyboard和纯代码两种布局方式,所以国际化也要同时实现.上网查了些资料,实现了更改系统语 ...
- fixed定位兼容性
不过从ios5.1以来,fixed定位就已经支持了,但很遗憾,ios现在对它还只是半支持. 但是在某些情况下,会出现一些比较奇葩的问题,比如fixed元素中存在输入框子元素,这个时候就会跪了. 可以看 ...
- iOS APP内购
看到网上文章一大把,看了这个觉得挺不错的,谢谢 iOS大全 公众平台; 原文:http://mp.weixin.qq.com/s?__biz=MzAxMzE2Mjc2Ng==&mid=2652 ...
- 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖
今天上午学习了内联元素于与块元素的转换 个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素displ ...
- iOS应用内抓包、NSURLProtocol 拦截 APP 内的网络请求
前言 开发中遇到需要获取SDK中的数据,由于无法看到代码,所以只能通过监听所有的网络请求数据,截取相应的返回数据,可以通过NSURLProtocol实现,还可用于与H5的交互 一.NSURLProto ...
- IOS上z-index和fixed定位无效
IOS上z-index和fixed定位无效 在该元素上加: -webkit-transform:translateZ(1px); -moz-transform:translateZ(1px); -o- ...
- ios 底部用定位 fixed。在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去。解决方法
ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...
随机推荐
- 唐纳德 高德纳给年轻人的建议 Donald Knuth - My advice to young people
From: Donald Knuth - My advice to young people (93/97) 译者: 李秋豪 原文 Donald Knuth (b. 1938), American c ...
- IDEA Translation插件中有道智云(有道翻译)应用ID,密钥申请教程
登录链接 该登录登录,该注册注册(信息随意填写) 自然语言翻译=>翻译实例=>创建实例(信息随意填写) QQ截图20170701231552.png 应用管理=>我的应用=>创 ...
- Pycharm配置(一)
Pycharm作为一款强力的Python IDE,在使用过程中感觉一直找不到全面完整的参考手册,因此决定对官网的Pycharm教程进行简要翻译,与大家分享. 1.准备工作 官网下载 2.如何选择Pyc ...
- ABP .Net Core API和Angular前端APP独立部署跨域问题(No Access-Control-Allow-Origin)
前言: 通过ABP官网(https://aspnetboilerplate.com)下载ASP.NET Core 2.x + Angular模板项目是按ReStful风格架构Web API和angul ...
- 我与 windows kernel 的一段时光
写在前面 本科毕业设计是实现一个基于 windows 的透明加密过滤系统.由此对 windows kernel development,尤其是 file system 进行过较为深入的探索.对于防终止 ...
- GVIM与模板——让FPGA开发变得更简单
还在使用FPGA开发环境自带的代码编辑器?还在逐个字母敲击冗长重复的代码?明德扬至简设计法让你快速提高代码编写效率!利用GVIM这一高效的编辑工具并添加自定义模板,通过简短的脚本命令即可自动生成所有常 ...
- bootstrap html页面禁止放大缩小
用bootstrap写的html页面,在手机端中禁止放大缩小: 亲测有效: <meta name="viewport" content="width=device- ...
- ArcGIS API for JavaScript 4.2学习笔记[9] 同一种视图不同数据(Map)同步
本例子核心:对MapView对象的map属性值进行替换即可达到更改地图数据的效果. 这个例子用的不是Map对象了,而是用的发布在服务器上的专题地图(WebMap)来加载到MapView上进行显示. 在 ...
- bzoj 2959: 长跑
Description 某校开展了同学们喜闻乐见的阳光长跑活动.为了能"为祖国健康工作五十年",同学们纷纷离开寝室,离开教室,离开实验室,到操场参加3000米长跑运动.一时间操场上 ...
- 房上的猫:switch选择结构,与选择结构总结
switch选择结构: 一.定义: switch选择结构,可以方便地解决等值判断问题二.语法: switch(表达式){ case 常量1: //代码块1; break; c ...