【原】IOS兼容性之APP內fixed定位頭部跳動

本文轉載於:猿2048網站【原】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，這樣頁面在快速滑動的時候，裏邊的內容就不會消失了。