前幾天做一個移動端的頁面，要加個像微信那樣附着在底部的回復框，按照做PC端網頁的思路，首先是用fixed，在安卓上測了一下是好的，結果到朋友的iphone6p上就不行了，點擊輸入框之后它總會跳到屏幕中間去。
后來才知道這是ios下一個普遍的bug，所以我決定把原因和解決方案整理一下，以方便后人。
網上有的人說用那個iscroll.js來解決，不過那樣會出現很多樣式上的沖突，而且為了一個fixed的bug就動用一個js，未免有點大材小用了。
原因
ios下面，軟鍵盤喚起后，頁面的 fixed 元素將失效（即無法浮動，也可以理解為變成了 absolute 定位），所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。
解決方法
-
三段式布局
- 代碼如下：
<style> header, footer, main { display: block; } header { position: fixed; height: 50px; left: 0; right: 0; top: 0; } footer { position: fixed; height: 34px; left: 0; right: 0; bottom: 0; } main { /* main絕對定位，進行內部滾動 */ position: absolute; top: 50px; bottom: 34px; /* 使之可以滾動 */ overflow-y: scroll; } main .content { height: 2000px; } /* 元素內的滾動非常不流暢，滑動的手指松開后，滾動立刻停止，失去了原本的流暢滾動特性，給main加上如下代碼即可。 */ main { /* main絕對定位，進行內部滾動 */ position: absolute; top: 50px; bottom: 34px; /* 使之可以滾動 */ overflow-y: scroll; /* 增加該屬性，可以增加彈性 */ -webkit-overflow-scrolling: touch; } </style> <body class="layout-scroll-fixed"> <!-- fixed定位的頭部 --> <header> </header> <!-- 可以滾動的區域 --> <main> <div class="content"> <!-- 內容在這里... --> </div> </main> <!-- fixed定位的底部 --> <footer> <input type="text" placeholder="Footer..."/> <button class="submit">提交</button> </footer> </body>可查看我的DEMO
這里是用了absolute來代替fixed效果，這是一個我認為比較好的解決方法，只要看仔細一點就沒啥樣式沖突問題。
-
JS監控輸入框到屏幕頂的高度
用js監控focus時的高度，然后控制變化，這個會出現回復框停留一段時間的問題。不建議用這種方法，具體代碼網上有很多。
-
iscroll.js
不在萬不得已的情況下，我們盡量嘗試一下不依賴第三方庫的布局方案，注意別沖突掉樣式和功能。
-