周記3——解決fixed屬性在ios軟鍵盤彈出後失效的bug

標籤：lan   導致   相對   恢複   inline   play   href   16px   介紹   

　　這周在做空間（“類似”qq空間）項目。首頁是好友發表的說說，可以針對每條說說進行評論，評論框吸附固定在螢幕底部。此時，Bug來了...在ios上，軟鍵盤彈出後fixed屬性失效了。後來發現，ios絕大部分情況把fixed變成了absolute。為什麼說是絕大部分情況下而不是100%，後面會提到。下面介紹2種方案...

 

1、css布局 （推薦）

　　解決思路：既然在 iOS 下由於軟鍵盤喚出後，頁面 fixed 元素會失效，導致跟隨頁面一起滾動，那麼假如——頁面不會過長出現滾動，那麼即便 fixed 元素失效，也無法跟隨頁面滾動，也就不會出現上面的問題了。

　　那麼按照這個思路，如果使 fixed 元素的父級不出現滾動，而將原 body 滾動的地區域移到 main 內部，而 header 和 footer 的樣式不變，代碼如下：

　　結果：在原始輸入法下， fixed 元素可以定位在頁面的正確位置。滾動頁面時，由於滾動的是 main 內部的 div，因此 footer 沒有跟隨頁面滾動。

　　上面貌似解決了問題，但是如果在手機上實際測試一下，會發現 main 元素內的滾動非常不流暢，滑動的手指鬆開後，滾動立刻停止，失去了原本的流暢滾動特性。由於彈性滾動的問題，發現在webkit中，下面的屬性可以恢複彈性滾動：-webkit-overflow-scrolling: touch;

 　　經過真機測試，發現ios10系統中，偶爾點擊後還是會擋住輸入框，所以上面說大部分情況下可以。其實，如何用這種布局的話，fixed可以直接換成absolute，這樣就能保證不同的ios系統的表現一致了。  2、利用scrollTop滾動到底部

　　先看下布局代碼：

//擷取焦點時 --滾動到底部interval = setInterval(function() {    document.body.scrollTop = document.body.scrollHeight}, 100);//失去焦點取消clearInterval(interval);

 

　　綜上兩種方法，第一種比較通用，第二種在軟鍵盤彈出後，雖然沒遮擋輸入框，但當滾動頁面時，會發現輸入框跟隨著滾動，因此，極力推薦第一種，簡單實用。

　　最後想說一點，為什麼ios會不識別fixed呢？因為手機屏本來能展示的內容就不多，所以不希望手機端有相對螢幕固定的元素，像某些網站的賣壯陽藥廣告一樣死死貼在螢幕上，妨礙閱讀。

 

參考連結：https://www.jianshu.com/p/782e61068334?tdsourcetag=s_pctim_aiomsg

 

周記3——解決fixed屬性在ios軟鍵盤彈出後失效的bug