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

時間 2019-12-04

標籤 ios 彈出鍵盤出現 fixed 失效現象解決方案欄目 iOS 简体版

原文原文鏈接

概述

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

解決方法

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

DOM

<html>
    <body>
        <div class=".wrap">
            <div class=".position"></div>
        </div>
    </body>
</html>

CSS

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

註釋

其實這個問題有不少插件能夠解決，可是我的認爲有時候不是非用插件不可的狀況下不必使用插件，一是影響頁面性能，二是我有代碼潔癖能夠嗎？
好吧開個玩笑~想必看到這裏問題已經解決了，若是沒有請在下方留言，很歡迎你們參與交流，互相學習。移動web開發

相關標籤/搜索