摘要：底部定位為的情況下激活輸入框時，底部不會彈出來合理。后遺癥底部按鈕和輸入框區域一起隨著滾動，不再置頂獨立。當滾動區域超過一屏幕時，底部輸入框定位出現錯亂。傳統解決辦法通常將底部設置為，當激活輸入框的時候，將底部定位改為，即可兼容和。

相信我，我分享的和你在其他博客上看到的終極方案是如此的與眾不同！

做過移動端開發的同學，對底部DOM定位出現的各種奇葩情況已經深惡痛絕了吧，底部DOM設置不同的position，在Android和ios上表現都不一樣。

為了兼容Android和ios，很多人都煞費苦心，也包括我。

打開你做的H5，尤其是在微信上打開看看，是不是覺得很惡心，如果自我感覺很惡心，那么請往下看這篇文章，不惡心說明你成功了，可以走了！

最終還是成功解決了，這篇文章記錄一下兼容2種設備的方案。

據我所知，網上還找不到一個能夠真正解決這個問題的教程，因為大多數人都是只考慮在body scroll的情況下，設置底部為fixed或者absolute，然后設置滾動區域padding-bottom的值，這種做法反正我是無法接受的，體驗太不爽了，也沒有兼容Android和ios。

下圖是第一種情況，滾動區域有表單，底部一個固定欄，當填寫表單的時候，我們看看ios和Android的表現情況：

1、底部定位為fixed的情況下

ios：激活輸入框時，底部不會彈出來（合理）。
Android：激活輸入框時，底部會跟著輸入框彈出來（不合理）。

2、底部定位為absolute的情況下

ios：激活輸入框時，底部不會彈出來（合理）。
Android：激活輸入框時，底部會跟著輸入框彈出來（不合理）。

android后遺癥：輸入框失焦的時候，可能導致底部顯示在瀏覽器中間某個位置，回不到原位置。

absolute后遺癥：底部按鈕和輸入框區域一起隨著body滾動，不再置頂獨立。當滾動區域超過一屏幕時，底部輸入框定位出現錯亂。

傳統解決辦法：

通常將底部設置為fixed，當激活輸入框的時候，將底部定位改為relative，即可兼容ios和Android。

底部如果是個輸入框的情況下，我們肯定需要輸入框在激活的時候彈出來，和第一種情況是相反的。

1、底部定位為fixed的情況下

ios：激活輸入框時，底部不會彈出來（不合理）。
Android：激活輸入框時，底部會跟著輸入框彈出來（合理）。

2、底部定位為absolute的情況下

ios：當滾動區域超過一屏幕時，底部輸入框定位出現錯亂（不合理）。
Android：當滾動區域超過一屏幕時，底部輸入框定位出現錯亂（不合理）。

傳統解決辦法：

仍舊是采用fixed定位

ios：在激活輸入框的時候，執行下面代碼

setTimeout(() => document.body.scrollTop = document.body.scrollHeight, 500)

android: 表現正常

除了抖動問題，還有就是微信端滾動body會顯示微信瀏覽器背景，也就是超出滾動邊界回彈效應，還有一個惡心的問題是當有彈框的時候，彈框和body滾動累加的雙重滾動會有點擊穿透造成的卡頓問題。

由此，如果你還寄希望于body滾動，那么你的移動端開發體驗真的一塌糊涂。

看到這里，你可以暫時把上面的傳統解決方案統統忘記。

下面我將會分享移動端最舒適的架構方案。

1、你可能聽過Iscroll，這個東西是我們今天要用到的框架的鼻祖，但我們不是用它，而是我曾經另外一篇文章介紹到的JRoll框架（比IScroll更加輕量和兼容的移動端滾動框架）。

2、使用這款框架對我們解決底部定位問題還有優化彈框體驗有什么幫助呢？他可以完美解決傳統解決方案的后遺癥，因為他并不是使用body滾動，而是使用css3滾動，采用GPU加速，在ios和Android上測試并不卡頓。如果你想做出像app一樣流程的H5，別再用那惡心的body滾動了。

下面的源碼你可以直接復制到一個html文件上測試，代碼中我提供了多種功能的解決方案：

1、采用滾動框架時，何時獲取滾動區域的高度（看源碼）

2、輸入框底部固定時，在該框架中兼容ios和Android的方法（看源碼）

3、采用DocumentFragment動態渲染5000個列表元素，說到這個有點意思，記得騰訊某部門的社招面試題就是考察這個知識點，一般人可能采用的是for循環加innerHTML的方法（看源碼）

使用上面提供的框架，你在移動端開發中，不再需要擔心底部固定的問題，不再需要擔心滾動造成的一系列問題，不再需要擔心彈框滾動以及點擊彈框造成的穿透問題等。

而且，不知道你發現沒有，底部固定欄你現在可以嘗試使用fixed、absolute、relative等設置，不再局限于只能使用fixed了。感興趣就好好研究一下代碼吧！

但是

在IOS11版本中，我發現了document.body.scrollTop = document.body.scrollHeight無效的bug，目前還沒找到原因，小于IOS11一切正常。