移動端調起軟鍵盤致使 position：fixed 偏移

1. 問題描述

app內打開H5頁面，頁面包含input輸入框，點擊input調起軟鍵盤，輸入完成點擊下方提交按鈕彈出toast時，會出現t toast 跳動的現象，以下動圖。

其中：
toast採用 position: fixed 進行固定定位

2. 分析緣由

關於 position: fixed

首先來看，MDN 中對 position: fixed 的說明：

不爲元素預留空間，而是經過指定元素相對於屏幕視口（ viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。

注意到，position: fixed 是相對屏幕視口（viewport）的位置來定位的。 那麼toast跳動是不是由於 viewport 的改變呢?

關於 viewport

MDN 中對 viewport 的說明：

@viewport 規則讓咱們能夠對文檔的大小進行設置 viewport 。這個特性主要被用於移動設備。 按百分比計算尺寸的時候，就是參照的初始視口（viewport）。初始視口指的是任何用戶代理和樣式對它進行修改以前的視口。桌面瀏覽器若是不是全屏模式的話，通常是基於窗口大小。

在移動設備上（或者桌面瀏覽器的全屏模式），初始視口一般就是應用程序可使用的屏幕部分。它多是全屏或者減去由操做系統或者其它應用程序所佔用的部分（例如狀態欄）。

咱們注意到，viewport 是會隨着操做系統或者應用程序佔用而變化的，那是否是在調起軟鍵盤的時候，改變了viewport 呢

驗證猜測

js 提供了Window.innerHeight 方法，用來獲取瀏覽器窗口的視口高度。
通過驗證，在調起軟鍵盤時，確實改變了viewport ，此時的視口高度是 咱們看到的可視屏幕高度-鍵盤高度, 因此咱們看到的toast跳動是由於 viewport的改變而致使。

3. 解決辦法

經過絕對定位position: absolute 來替代 position: fixed

一般 toast 是直接插入到body元素下面的(固然能夠是別的任何元素)，即 toast 是body元素的直接子元素，所以，能夠設置toast 相對body元素進行絕對定位。

代碼以下：

body {
    position: relative；
}
.toast {
   //  固定屏幕中間
    position: absolute；
    top: 50%; 
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

4. 注意事項

在使用經過絕對定位position: absolute 來替代 position: fixed的解決方案時，若是top、left 設置百分比，就須要注意設置絕對定位元素的 offsetParent 的 height 及 width 值。

由於，絕對定位是相對離它最近的position 屬性值不爲static的父元素（即 offsetParent ）來進行定位，而且top、left 設置百分比是以offsetParent 的height 和 width 來計算的。

好比上述動圖中的例子，能夠看到body的內容高度遠遠不到屏幕高度，所以想要實現 toast 在屏幕居中，就須要爲 body元素設置合理的高度（經過設置 min-height 或者 height ）。

上述例子的完整代碼：

html{
    height: 100%;  // 設置html爲瀏覽器窗口高度（不設100%的話，html 高度就等於body的高度）
}
body {
    position: relative；
    min-height: 600px;  // 設置最小高度
}
.toast {
   //  固定屏幕中間
    position: absolute；
    top: 50%; 
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

offsetParent 概念補充

The HTMLElement.offsetParent read-only property returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the nearest td, th, table or the body is returned.

5. 總結

針對移動端調起軟鍵盤致使 position：fixed 偏移的問題，能夠經過絕對定位(position: absolute)替代固定定位( position：fixed)來曲線救國。 若是top、left 設置百分比，則同時注意設置絕對定位元素的 offsetParent 的height 和 width 值。