兼容现象:

  在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定位头部跳动的更多相关文章

  1. IOS IAP APP内支付 Java服务端代码

    IOS IAP APP内支付 Java服务端代码   场景:作为后台需要为app提供服务,在ios中,app内进行支付购买时需要进行二次验证. 基础:可以参考上一篇转载的博文In-App Purcha ...

  2. IE11下使用fixed定位时鼠标滚动不平滑

    很久不用IE了,近期做兼容性测试发现一个fixed定位的问题,当元素使用fixed定位时,其应该不随页面滚动,在chrome/firefox/edge下都很完美,元素完全不动,但是使用IE11时,如果 ...

  3. iOS开发——iOS国际化 APP内语言切换

    最近一个一直在迭代的老项目收到一份新的开发需求,项目需要做国际化适配,简体中文+英文.由于项目中采用了storyboard和纯代码两种布局方式,所以国际化也要同时实现.上网查了些资料,实现了更改系统语 ...

  4. fixed定位兼容性

    不过从ios5.1以来,fixed定位就已经支持了,但很遗憾,ios现在对它还只是半支持. 但是在某些情况下,会出现一些比较奇葩的问题,比如fixed元素中存在输入框子元素,这个时候就会跪了. 可以看 ...

  5. iOS APP内购

    看到网上文章一大把,看了这个觉得挺不错的,谢谢 iOS大全 公众平台; 原文:http://mp.weixin.qq.com/s?__biz=MzAxMzE2Mjc2Ng==&mid=2652 ...

  6. 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

    今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素displ ...

  7. iOS应用内抓包、NSURLProtocol 拦截 APP 内的网络请求

    前言 开发中遇到需要获取SDK中的数据,由于无法看到代码,所以只能通过监听所有的网络请求数据,截取相应的返回数据,可以通过NSURLProtocol实现,还可用于与H5的交互 一.NSURLProto ...

  8. IOS上z-index和fixed定位无效

    IOS上z-index和fixed定位无效 在该元素上加: -webkit-transform:translateZ(1px); -moz-transform:translateZ(1px); -o- ...

  9. ios 底部用定位 fixed。在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去。解决方法

    ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...

随机推荐

  1. jsp的标签库和自定义标签

    1.jstl标签库 JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. ...

  2. python中对象、类型和元类之间的关系

    在python中对象.类型和元类构成了一个微妙的世界. 他们有在这个世界里和平共处,相辅相成.它们遵循着几条亘古不变的定律: 1.python中无处不对象 2.所有对象都有三种特性:id.类型.值 3 ...

  3. OC学习12——字符串、日期、日历

    前面主要学习了OC的基础知识,接下来将主要学习Foundation框架的一些常用类的常用方法.Foubdation框架是Cocoa编程.IOS编程的基础框架,包括代表字符串的NSString(代表字符 ...

  4. 函数PYXX_READ_PAYROLL_RESULT的dump问题

    发现有两个HR的后台定时任务出现dump,日志表示,是PYXX_READ_PAYROLL_RESULT产生了类型冲突的异常CX_SY_DYN_CALL_ILLEGAL_TYPE. 日志标题部分: 类别 ...

  5. intelij Android 搭建 java 项目

    1.打开ide创建页面,点击创建项目 2.选择Android,发现下面有一段红字,解释很清楚,由于第一使用为设置Android的开发环境sdk,去设置一下就好,点击取消回到上一界面 3 配置 4.当然 ...

  6. css各种布局

    1.水平居中 前提:父容器.parent 和子容器.child 1)使用text-align和inline-block .parent{text-aling:center}; .child {disp ...

  7. Java 向下转型

    1.Java 中父类直接向子类转型的不合法的,可以编译但运行时报错. Java中子类直接向父类转型 是合法的,但转型后,可以执行的方法仅限存在于父类中的,在执行时,先看子类的是否有定义,有就执行,没有 ...

  8. Lucene分词停用词库stopwords

    ! " $ % & ' ( ) * + , - -- . .. ... ...... ................... ./ .一 .数 .日 / // 0 1 2 3 4 5 ...

  9. 解决 mysql 中文乱码

    mysql版本:5.6.38 虽然创建实例时选择的是utf-8的utf8_general_ci,但是用其他程序保存中文时依旧出现乱码的情况. 记录一种可行的解决方案,即修改数据库的字符集. 由于该环境 ...

  10. vue有关小知识

      截取链接参数: //截取链接参数 this.id = this.$route.query.id;