處理ios軟鍵盤彈起和收起時(shí)頁面滾動(dòng)問題

背景：

在開發(fā)添加主播功能時(shí)，頁面底部需要彈出一個(gè)抽屜彈窗，點(diǎn)擊抽屜上的輸入框，會(huì)喚起軟鍵盤，由于iOS的軟鍵盤觸發(fā)方式是將頁面滾動(dòng)，所以導(dǎo)致頁面位置偏移

bug描述：

<必現(xiàn)>iOS：添加主播成功后 頁面會(huì)定位在節(jié)目設(shè)置頁的最底部

解決過程：

經(jīng)過google看了一大堆資料，找到了核心原因，就是ios的滾動(dòng)scroll 效應(yīng)。

網(wǎng)絡(luò)上有大量的解決方案是獲取當(dāng)前頁面的滾動(dòng)高度（scrolltop），然后在頁面outfocus時(shí)，使用window.scroll把頁面滾動(dòng)回去。

但是這個(gè)方法會(huì)存在很多問題

由于本身該頁面就存在一個(gè)底部抽屜組件，scroll回去的時(shí)候頁面滾動(dòng)效果非常明顯，頁面就像重新渲染了一次，抽屜會(huì)重新彈起，體驗(yàn)非常差。

outfocus不太穩(wěn)定，頁面上有select和其他輸入的時(shí)候，彈起選擇框，也會(huì)觸發(fā)onfocus，整個(gè)頁面就亂滾

核心問題其實(shí)是底下的主內(nèi)容在亂動(dòng)，所以把它固定住不要讓他滾動(dòng)就好了，所以最后還是選擇在底部彈窗出現(xiàn)的時(shí)候把整個(gè)頁面fixed固定住，阻止整個(gè)內(nèi)容滾動(dòng)。

獲取彈窗出現(xiàn)是頁面的scrolltop

彈窗出現(xiàn)時(shí)設(shè)置style：position:fixed; top:-scrollTop;

彈窗消失時(shí)，恢復(fù)原本的頁面定位，并用window.scroll(0, scrollTop)恢復(fù)到原先頁面的位置。

iOS和Android軟鍵盤彈起/收起的不同形式：

在 IOS 上，

輸入框（input、textarea 或 富文本）獲取焦點(diǎn)，軟鍵盤彈起，頁面（webview）并沒有被壓縮，或者說高度（height）沒有改變，只是頁面（webview）整體往上滾了，且最大滾動(dòng)高度（scrollTop）為軟鍵盤高度。

觸發(fā)軟鍵盤上的“收起/完成”按鈕鍵盤或者輸入框以外的頁面區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤收起。注意：頁面依然是鍵盤彈起時(shí)scroll到的位置。

在 Android上，

輸入框獲取焦點(diǎn)，鍵盤彈起，但是頁面（webview）高度會(huì)發(fā)生改變，一般來說，高度為可視區(qū)高度（原高度減去軟鍵盤高度），除了因?yàn)轫撁鎯?nèi)容被撐開可以產(chǎn)生滾動(dòng)，webview本身不能滾動(dòng)。

觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤收起。但是，觸發(fā)鍵盤上的收起按鈕鍵盤時(shí)，輸入框并不會(huì)失去焦點(diǎn)，同樣軟鍵盤收起。頁面恢復(fù)正常。

總結(jié)

以上是生活随笔為你收集整理的处理ios软键盘弹起和收起时页面滚动问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。