【原】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>

 

posted on 2018-01-18 23:31 白水源 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为coder-dumeng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/coder-dumeng/p/8313542.html