IOS輸入框不貼底解決方法（ios12新bug）

結構以下

咱們須要作的就是當聚焦評論框的時候，ios須要讓鍵盤頂起評論框。在ios系統中，當鍵盤彈起的時候，會擠壓頁面，評論框會天然在頂部，可是有個問題就是，下面的評論框會不貼底，露出下面的東西，因此在ios12以前的解決辦法就是在評論框觸發focus的時候讓頁面滾動到底部，代碼以下：

const body = document.dcumentElement.scrollTop ? document.documentELement : document.body;
const {scrollHeight, scrollTop} = body;
const innerHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
body.scrollTop = scrollHeight - innerHeight;
複製代碼

若是輸入框失去焦點，就讓頁面滾動到先前的位置。 代碼以下：

body.scrollTop = scrollTop; // 滾動到先前的位置
複製代碼

這種方案在ios12上會出現兩個問題：

• 若是在頁面底部吊起輸入框，輸入框會被鍵盤擋住
• 若是在頁面中部，行爲會變得很奇怪，即便咱們用了上面的方法，輸入框會不貼底，衆所周知在輸入的時候，fixed定位會生效，即便咱們禁用了touchmove事件，仍是可以滾動

因此針對這些問題，我先試了網上這種聽說通用的解決方法: `scrollIntoView`這種方法，可是報錯了，沒有這個方法。

而後我本身分析了一下這個問題，出現各類狀況的緣由是由於彈出鍵盤時，頁面可以滾動，因而就出現了各類問題，那乾脆讓頁面沒法滾動。ios11及以前使用了下面的佈局：

.parent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
複製代碼

而且禁止了touchmove事件，這樣可以讓頁面沒法滾動，可是ios12並無什麼卵用。仍是可以滾動，那我們就讓內容就一屏，多的被截掉。下面是輸入框focus的代碼：

const {scrollHeight,scrollTop} = body;
const innerHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
body.style.height = `${innerHeight}px`;
body.style.overflow = 'hidden';
複製代碼

而後就是輸入框觸發blur事件時的代碼：

body.style.height = `${scrollHeight}px`;
body.style.overflow = 'auto';
body.style.scrollTop = scrollTop;
複製代碼

在這裏須要從新設置body的高度，高度爲以前獲取的scrollHeight，由於咱們須要從新滾動到先前的位置，建議不要設置height爲auto,由於在一些場景下咱們可能須要監聽滾動事件，會出現其餘的問題(穩戰穩打才能打勝仗)。而後從新設置body的overflow,讓頁面可以滾動，最後滾動到先前的位置。