資訊專欄INFORMATION COLUMN
摘要：在系統中，當鍵盤彈起的時候，會擠壓頁面，評論框會自然在頂部，但是有個問題就是，下面的評論框會不貼底，露出下面的東西，所以在之前的解決辦法就是在評論框觸發的時候讓頁面滾動到底部，代碼如下如果輸入框失去焦點，就讓頁面滾動到先前的位置。
結構如下
我們需要做的就是當聚焦評論框的時候，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上會出現兩個問題：
然后我自己分析了一下這個問題，出現各種情況的原因是因為彈出鍵盤時，頁面能夠滾動，于是就出現了各種問題，那干脆讓頁面無法滾動。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,讓頁面能夠滾動，最后滾動到先前的位置。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53686.html
摘要：在系統中，當鍵盤彈起的時候，會擠壓頁面，評論框會自然在頂部，但是有個問題就是，下面的評論框會不貼底，露出下面的東西，所以在之前的解決辦法就是在評論框觸發的時候讓頁面滾動到底部，代碼如下如果輸入框失去焦點，就讓頁面滾動到先前的位置。 結構如下showImg(https://segmentfault.com/img/remote/1460000018217892?w=640&h=960);...
摘要：在之后，的框失焦后頁面會出現被頂上去一部分的下面就來看下怎么解決這個，首先我們必須知道這兩個方法軟鍵盤彈起事件軟鍵盤關閉事件。 在iOS12之后，h5的input框失焦后頁面會出現被頂上去一部分的bug,下面就來看下怎么解決這個bug，首先我們必須知道這兩個方法focusin(軟鍵盤彈起事件)、focusout(軟鍵盤關閉事件)。注意：這里的input框的位置是在頁面的底部 廢話不多說...
閱讀 1250·2023-04-26 01:38
閱讀 1462·2021-11-15 11:39
閱讀 3251·2021-09-22 15:43
閱讀 2638·2019-08-30 15:55
閱讀 2047·2019-08-30 14:17
閱讀 2851·2019-08-29 14:16
閱讀 3062·2019-08-26 18:36
閱讀 2607·2019-08-26 12:19
