h5 ios中軟鍵盤彈起后 fixed定位失效

position: fixed; 在 iOS手機中會存在一個失效情況：

1、針對當前內容高度小於屏幕高度時：

上下滑動頁面時候，發現之前 fixed 定位在頂部的元素會跟隨頁面滾動，變成了absolute定位的效果。

2、針對當前內容高度大於屏幕高度時：

之前 fixed 定位在頂部的 View 不見了，下滑往上翻頁面后，就會看那個fixed定位的元素錯落在頁面中，但並不是在最頂部。

綜上可以看出，ios 瀏覽器是針對 fixed 定位的元素作了處理，不再是之前定位效果，變成了 absolute 定位的效果但並不是 absolute ，但可以理解為top：對應為當前 body 的 scrollTop 值。

那么該怎么解決這個問題呢？

在這里我是比較傾向於遵循 ios 瀏覽器處理 fixed 元素的初衷，瀏覽器去處理 fixed 元素應該是有它考慮的地方，退一步說其實也沒有必要在這個情況下強制顯示頂部元素，這時候用戶的重點在於輸入。

這里給出的方案就是：在軟鍵盤彈起后，直接把 fixed 的元素變成 absolute 的，不需要瀏覽器自己去做處理，待鍵盤收起后再恢復成 fixed 。

以下代碼環境是在React中
document.body.addEventListener('focusin', () => {
    //軟鍵盤彈出的事件處理
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    //注只針對ios 、處在滾動中位置時
    isIphone() && scrollTop > 0 && this.setState({ className: 'postion-absolute' })
})
document.body.addEventListener('focusout', () => {
      //軟鍵盤收起的事件處理
     isIphone() && this.setState({ className: '' })
})

 

轉載： h5 ios中軟鍵盤彈起后 fixed定位失效