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上會出現兩個問題：
<ul>
<li>如果在頁面底部吊起輸入框，輸入框會被鍵盤擋住</li>
<li>如果在頁面中部，行爲會變得很奇怪，即使我們用了上面的方法，輸入框會不貼底，衆所周知在輸入的時候，fixed定位會生效，即使我們禁用了touchmove事件，還是能夠滾動</li>
</ul>
所以針對這些問題，我先試了網上這種據說通用的解決方法:
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,讓頁面能夠滾動，最後滾動到先前的位置。