zoukankan      html  css  js  c++  java
  • 【原】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,这样页面在快速滑动的时候,里边的内容就不会消失了。

  • 相关阅读:
    【3】网站搭建:分页功能
    mapserv和mapserv.exe的区别
    WMS请求GetCapabilities,变成下载mapserv.exe解决办法
    get和post的区别
    实现ajax异步请求
    Thinkphp3.2 Widget的扩展
    Thinkphp3.2 路由是使用
    Thinkphp3.2 TagLib的使用
    Thinkphp下实现Rbac
    Thinkphp下实现分页
  • 原文地址:https://www.cnblogs.com/coder-dumeng/p/8313542.html
Copyright © 2011-2022 走看看