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