IOS中彈出鍵盤后出現fixed失效現象的解決方案

YorkChen 發布于2019-08-30 13:05 / 2742人閱讀

摘要：概述這個問題常出現在移動開發中聊天或者留言頁面的絕對定位輸入框上，頁面超過屏幕大小時候輸入框狀態下鍵盤彈出絕對定位的元素失效，導致頁面滾動時候把定位元素一并帶走，體驗十分不好，在此留下一自己的方法，讓更多的人不需要再爬這樣的小坑。

概述

這個問題常出現在移動web開發中聊天或者留言頁面的絕對定位輸入框上，頁面超過屏幕大小時候輸入框focus狀態下（鍵盤彈出）絕對定位的元素失效，導致頁面滾動時候把定位元素一并帶走，體驗十分不好，在此留下一自己的方法，讓更多的人不需要再爬這樣的小坑。

解決方法

原理很簡單，就是定義一個外框把頁面包起來，把需要使用fixed定位的元素設置成absolute定位，然后設置外框元素的樣式為overflow-y:scroll即可，下面是實例：
假設外框元素為.wrap，需要fixed定位的元素為.position：

DOM

CSS

html, body, .wrap {
    width: 100%;
    height: 100%;
}
.wrap {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; //因為使用overflow滾動體驗不如正常的頁面滾動，加上這個樣式以后滾動即會變得順滑
}
.position {
    position: absolute;
}

注釋

其實這個問題有很多插件可以解決，但是個人認為有時候不是非用插件不可的情況下沒必要使用插件，一是影響頁面性能，二是我有代碼潔癖可以嗎？
好吧開個玩笑~想必看到這里問題已經解決了，如果沒有請在下方留言，很歡迎大家參與交流，互相學習。

GPU云服務器云服務器 ios6出現的漏洞 js混淆后失效 ajax 后js失效 iOS鍵盤切換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115303.html

IOS中彈出鍵盤后出現fixed失效現象的解決方案

摘要：概述這個問題常出現在移動開發中聊天或者留言頁面的絕對定位輸入框上，頁面超過屏幕大小時候輸入框狀態下鍵盤彈出絕對定位的元素失效，導致頁面滾動時候把定位元素一并帶走，體驗十分不好，在此留下一自己的方法，讓更多的人不需要再爬這樣的小坑。概述這個問題常出現在移動web開發中聊天或者留言頁面的絕對定位輸入框上，頁面超過屏幕大小時候輸入框focus狀態下（鍵盤彈出）絕對定位的元素失效，導致頁面...

xcc3641 2019-08-02 15:55 評論0 收藏0
safari瀏覽器fixed后，被軟鍵盤遮蓋的問題—【未解決】

摘要：瀏覽器后，被軟鍵盤遮蓋的問題，已經有好多人問相關的問題，應該是問的角度不一樣，還的再次提出咯。如上循環，問題無法解決。 safari瀏覽器fixed后，被軟鍵盤遮蓋的問題，已經有好多人問相關的問題，應該是問的角度不一樣，還的再次提出咯。問題描述測試環境：ios 10.2/10.3 簡單來說就是在html5頁面中底部有個fixed的區域，如圖 showImg(https://segm...

miya 2019-08-29 12:19 評論0 收藏0
(2016-11-04完美解決)移動端iOS第三方輸入法遮擋底部input及android鍵盤回落后

摘要：問題概述問題移動端輸入框鍵盤喚起后定位好的元素跟隨頁面滾動了起來屬性失效了滿屏任性橫飛如下圖問題有第三方輸入法的機還會出現鍵盤彈出延遲，導致普通布局輸入框等位置靠下的被鍵盤擋住如下圖這個完成出來然后鍵盤再頂起完美解決方案在輸入框獲取焦點問題概述問題1：H5 web 移動端輸入框, 鍵盤喚起后fixed定位好的元素跟隨頁面滾動了起來… fixed屬性失效了！滿屏任性橫飛, 如下圖:...

Simon 2019-08-21 14:15 評論0 收藏0