處理ios軟鍵盤彈起和收起時頁面滾動問題

背景：

在開發添加主播功能時，頁面底部需要彈出一個抽屜彈窗，點擊抽屜上的輸入框，會喚起軟鍵盤，由于iOS的軟鍵盤觸發方式是將頁面滾動，所以導致頁面位置偏移

bug描述：

<必現>iOS：添加主播成功后 頁面會定位在節目設置頁的最底部

解決過程：

經過google看了一大堆資料，找到了核心原因，就是ios的滾動scroll 效應。

網絡上有大量的解決方案是獲取當前頁面的滾動高度（scrolltop），然后在頁面outfocus時，使用window.scroll把頁面滾動回去。

但是這個方法會存在很多問題

由于本身該頁面就存在一個底部抽屜組件，scroll回去的時候頁面滾動效果非常明顯，頁面就像重新渲染了一次，抽屜會重新彈起，體驗非常差。

outfocus不太穩定，頁面上有select和其他輸入的時候，彈起選擇框，也會觸發onfocus，整個頁面就亂滾

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

獲取彈窗出現是頁面的scrolltop

彈窗出現時設置style：position:fixed; top:-scrollTop;

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

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

在 IOS 上，

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

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

在 Android上，

輸入框獲取焦點，鍵盤彈起，但是頁面（webview）高度會發生改變，一般來說，高度為可視區高度（原高度減去軟鍵盤高度），除了因為頁面內容被撐開可以產生滾動，webview本身不能滾動。

觸發輸入框以外的區域時，輸入框失去焦點，軟鍵盤收起。但是，觸發鍵盤上的收起按鈕鍵盤時，輸入框并不會失去焦點，同樣軟鍵盤收起。頁面恢復正常。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。