【原】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() ...
随机推荐
- 《如何把事情做到最好》【PDF】下载
<如何把事情做到最好>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382279 内容简介 <如何把事情做到最好>编辑 ...
- 使用canvas实现绚丽的时钟特效
源码 https://github.com/2016Messi/Gorgeous-clock 效果展示 https://2016messi.github.io/Gorgeous-clock/ 如果各位 ...
- Xamarin android SwipeRefreshLayout入门实例
android SwipeRefreshLayout 是实现的效果就是上滑下拉刷新ListView 获取其他控件数据.基本上每个App都有这种效果.Google提供了一个官方的刷新控件SwipeRef ...
- selenium爬取百度图片
一:简介 通过selenium模块,模拟火狐浏览器进行搜索下载操作. 二:脚本内容 # -*- coding:utf-8 -*- # 百度图片自动爬去 # Chrome浏览器类似,设置其options ...
- glibc-commons 依赖解析 版本错误,xxx is duplicate yyy
glibc-commons 安装了两个版本,导致依赖glibc-commons的很多软件包 被安装了两个版本: 解决办法就是 先清除这些重复的已安装的软件,然后执行 yum update 将 glib ...
- Qt数据库集成应用封装
平时的大大小小的项目中,基本上都需要与数据库打交道,会遇到各种各样的应用场景,本人主要遇到四种场景1:数据库自动重连,例如mysql数据库中经常遇到服务器挂掉的情况,需要自动检测并重新连接数据库.2: ...
- 【开源】AspnetCore 2.0 自动API文档生成组件,支持protobuffer
本文地址 http://www.cnblogs.com/likeli/p/8204054.html 关于 API文档自动生成,用于对APP端的开发帮助文档生成,默认ProtoBuffer传输格式. 本 ...
- 关于php中,记录日志中,将数组转为json信息记录日志时遇到的问题总结
1 中文编码化,无法看到具体的中文,如:你好 => \u4F60\u597D 解决方案:可以使用 json_encode($arr,JSON_UNESCAPED_UNICODE) 转义中文[ ...
- Xamarin.android Activity动画切换效果实现
http://blog.csdn.net/esunshine1985/article/details/44302903 1.在Resources--values下新建styles.xml,添加内容如下 ...
- ORA-00600[17059]错误
ORA-00600[17059] ORA-00600[17059]错误大部分都是因为高版本导致,对于本库的分析:因为该库的 shared pool老化比较频繁,到我介入的时候,发现相关该类此sql已经 ...