摘要：在系統(tǒng)中，當(dāng)鍵盤彈起的時(shí)候，會(huì)擠壓頁(yè)面，評(píng)論框會(huì)自然在頂部，但是有個(gè)問(wèn)題就是，下面的評(píng)論框會(huì)不貼底，露出下面的東西，所以在之前的解決辦法就是在評(píng)論框觸發(fā)的時(shí)候讓頁(yè)面滾動(dòng)到底部，代碼如下如果輸入框失去焦點(diǎn)，就讓頁(yè)面滾動(dòng)到先前的位置。

結(jié)構(gòu)如下

我們需要做的就是當(dāng)聚焦評(píng)論框的時(shí)候，ios需要讓鍵盤頂起評(píng)論框。在ios系統(tǒng)中，當(dāng)鍵盤彈起的時(shí)候，會(huì)擠壓頁(yè)面，評(píng)論框會(huì)自然在頂部，但是有個(gè)問(wèn)題就是，下面的評(píng)論框會(huì)不貼底，露出下面的東西，所以在ios12之前的解決辦法就是在評(píng)論框觸發(fā)focus的時(shí)候讓頁(yè)面滾動(dòng)到底部，代碼如下：

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;

如果輸入框失去焦點(diǎn)，就讓頁(yè)面滾動(dòng)到先前的位置。
代碼如下：

body.scrollTop = scrollTop; // 滾動(dòng)到先前的位置

這種方案在ios12上會(huì)出現(xiàn)兩個(gè)問(wèn)題：

• 如果在頁(yè)面底部吊起輸入框，輸入框會(huì)被鍵盤擋住


• 如果在頁(yè)面中部，行為會(huì)變得很奇怪，即使我們用了上面的方法，輸入框會(huì)不貼底，眾所周知在輸入的時(shí)候，fixed定位會(huì)生效，即使我們禁用了touchmove事件，還是能夠滾動(dòng)

然后我自己分析了一下這個(gè)問(wèn)題，出現(xiàn)各種情況的原因是因?yàn)閺棾鲦I盤時(shí)，頁(yè)面能夠滾動(dòng)，于是就出現(xiàn)了各種問(wèn)題，那干脆讓頁(yè)面無(wú)法滾動(dòng)。ios11及之前使用了下面的布局：

.parent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

并且禁止了touchmove事件，這樣能夠讓頁(yè)面無(wú)法滾動(dòng)，但是ios12并沒(méi)有什么卵用。還是能夠滾動(dòng)，那咱們就讓內(nèi)容就一屏，多的被截掉。下面是輸入框focus的代碼：

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

然后就是輸入框觸發(fā)blur事件時(shí)的代碼：

body.style.height = `${scrollHeight}px`;
body.style.overflow = "auto";
body.style.scrollTop = scrollTop;

在這里需要重新設(shè)置body的高度，高度為之前獲取的scrollHeight，因?yàn)槲覀冃枰匦聺L動(dòng)到先前的位置，建議不要設(shè)置height為auto,因?yàn)樵谝恍﹫?chǎng)景下我們可能需要監(jiān)聽(tīng)滾動(dòng)事件，會(huì)出現(xiàn)其他的問(wèn)題(穩(wěn)戰(zhàn)穩(wěn)打才能打勝仗)。然后重新設(shè)置body的overflow,讓頁(yè)面能夠滾動(dòng)，最后滾動(dòng)到先前的位置。