這周在做空間（“類似”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;

　　先看下布局代碼：

//獲取焦點時 --滾動到底部
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