資訊專欄INFORMATION COLUMN
摘要：在系統(tǒng)中，當(dāng)鍵盤彈起的時(shí)候，會(huì)擠壓頁面，評(píng)論框會(huì)自然在頂部，但是有個(gè)問題就是，下面的評(píng)論框會(huì)不貼底，露出下面的東西，所以在之前的解決辦法就是在評(píng)論框觸發(fā)的時(shí)候讓頁面滾動(dòng)到底部，代碼如下如果輸入框失去焦點(diǎn)，就讓頁面滾動(dòng)到先前的位置。
結(jié)構(gòu)如下
我們需要做的就是當(dāng)聚焦評(píng)論框的時(shí)候，ios需要讓鍵盤頂起評(píng)論框。在ios系統(tǒng)中，當(dāng)鍵盤彈起的時(shí)候，會(huì)擠壓頁面，評(píng)論框會(huì)自然在頂部，但是有個(gè)問題就是，下面的評(píng)論框會(huì)不貼底，露出下面的東西，所以在ios12之前的解決辦法就是在評(píng)論框觸發(fā)focus的時(shí)候讓頁面滾動(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)，就讓頁面滾動(dòng)到先前的位置。
代碼如下：
body.scrollTop = scrollTop; // 滾動(dòng)到先前的位置
這種方案在ios12上會(huì)出現(xiàn)兩個(gè)問題：
然后我自己分析了一下這個(gè)問題，出現(xiàn)各種情況的原因是因?yàn)閺棾鲦I盤時(shí)，頁面能夠滾動(dòng)，于是就出現(xiàn)了各種問題，那干脆讓頁面無法滾動(dòng)。ios11及之前使用了下面的布局：
.parent {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
并且禁止了touchmove事件，這樣能夠讓頁面無法滾動(dòng)，但是ios12并沒有什么卵用。還是能夠滾動(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)聽滾動(dòng)事件，會(huì)出現(xiàn)其他的問題(穩(wěn)戰(zhàn)穩(wěn)打才能打勝仗)。然后重新設(shè)置body的overflow,讓頁面能夠滾動(dòng)，最后滾動(dòng)到先前的位置。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101910.html
摘要：在系統(tǒng)中，當(dāng)鍵盤彈起的時(shí)候，會(huì)擠壓頁面，評(píng)論框會(huì)自然在頂部，但是有個(gè)問題就是，下面的評(píng)論框會(huì)不貼底，露出下面的東西，所以在之前的解決辦法就是在評(píng)論框觸發(fā)的時(shí)候讓頁面滾動(dòng)到底部，代碼如下如果輸入框失去焦點(diǎn)，就讓頁面滾動(dòng)到先前的位置。 結(jié)構(gòu)如下showImg(https://segmentfault.com/img/remote/1460000018217892?w=640&h=960);...
摘要：在之后，的框失焦后頁面會(huì)出現(xiàn)被頂上去一部分的下面就來看下怎么解決這個(gè)，首先我們必須知道這兩個(gè)方法軟鍵盤彈起事件軟鍵盤關(guān)閉事件。 在iOS12之后，h5的input框失焦后頁面會(huì)出現(xiàn)被頂上去一部分的bug,下面就來看下怎么解決這個(gè)bug，首先我們必須知道這兩個(gè)方法focusin(軟鍵盤彈起事件)、focusout(軟鍵盤關(guān)閉事件)。注意：這里的input框的位置是在頁面的底部 廢話不多說...
閱讀 1734·2021-09-30 09:47
閱讀 3744·2021-09-22 15:05
閱讀 2942·2021-08-30 09:44
閱讀 3687·2019-08-30 15:55
閱讀 1454·2019-08-30 13:08
閱讀 1387·2019-08-29 16:40
閱讀 608·2019-08-29 12:45
閱讀 1445·2019-08-29 11:25
