【原】IOS兼容性之APP内fixed定位头部跳动
2018-01-18 23:31
411 查看
兼容现象:
在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本里边,问题来了,当我们快速滑动页面的时候,页面滚动期间,这个fixed定位的头部会随着页面的滑动滑上去,等到上滑动作执行完毕时,头部才又出现。这个问题在安卓及ios11以下的版本都是没有的。
解决:
直接将这个页面控制在一个盒子里边去滑动,头部相对于这个盒子进行绝对定位。但是这样写带来的副作用就是除类名为wrapper的元素外,其他元素的scrollTop属性值总是0。
- 2018/1/24更新 -
后来在项目中发现,这么处理,会引发另外一个问题,快速滑动页面,头部是固定了,没有问题了,但是 .content 里边的内容会消失,导致页面在滑动的时候,里边的东西是空白的,上滑和下滑均是如此,因此还需要做另外一个处理,,给 .content 或.content里边的子元素加上 overflow-y:hidden,这样页面在快速滑动的时候,里边的内容就不会消失了。
在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,这样页面在快速滑动的时候,里边的内容就不会消失了。
相关文章推荐
- HTML兼容性 不声明doctype,IE9标准模式下position:fixed定位失败,导致遮罩层(Mask Layer)显示在页面最下方,FF和Chrome正常
- 移动端 position:fixed; 定位在iOS系统上失效,该怎么解决
- h5实现输入框fixed定位在屏幕最底部兼容性
- IOS开发—App 在 IOS 8 的simulator运行时,定位卡死bug解决
- iOS 判断APP是否打开定位,并实现直接跳转打开定位
- iOS应用程序开发——解决iOS7之前版本与之后版本下app启动图片跳动问题
- iOS app 崩溃日志符号化及代码定位
- Xcode/iOS 5 开发定位服务的App
- iOS 6 开发---开发定位服务的App-在地图上标注位置
- 在iOS App中实现地理位置定位的基本方法解析
- iOS测试:IPV4下搭建IPV6网络 测试app在IPV4和IPV6下的兼容性
- ios系统和某些移动端background-attachment:fixed不兼容性
- IOS开发—App 在 IOS 8 的simulator运行时,定位卡死bug解决
- h5实现输入框fixed定位在屏幕最底部兼容性
- 官方AWZ爱伪装 一键新机 全息备份 虚拟定位 非NZT 暗王者 IG V8 V3 IOSAPP一键新机 全息备份
- ios固定定位fixed兼容问题
- 如何查看iOS已上架app崩溃分布、定位crash发生的行
- ios系统fixed定位元素滚动后无法点击
- iOS swift 获取对应APP定位权限是否打开并引导用户打开