我們在開發移動端頁面時，經常會存在這種需求，在頁面頂部或底部有一個輸入框，一直浮動在頂部或底部位置，中間部分的內容是可以滾動的。比如底部輸入框的搜索功能，或底部輸入框的寫評論功能。
這種問題，我們一般會使用的方法是一個position:fixed;的div，在里面放一個input，浮動在頂部或底部，其他的內容可以滾動。
這種方法在安卓設備中肯定是沒問題的。但是在ios設備中就會有問題了。
問題1：滾動頁面內容部分時，浮動部分可能會消失，滾動結束后才展示出來
問題2：點擊輸入框進行輸入時，呼出鍵盤后，輸入框位置漂移了。
如視頻效果：
這兩個問題，之前在網上確實找過很多方法，也試過，但是都不太理想。
之前因為時間問題，所以就只使用了這種方法：
輸入框獲取焦點時，得到頁面的滾動高度，將輸入框div使用absolute絕對定位到當前滾動高度處，並禁止滾動。失去焦點后，將輸入框div變回fixed，回到原來樣子。
但此方法並不是很理想。只能勉強解決頂部浮動輸入框的輸入問題，但是頁面滾動時，浮動區域消失和底部輸入框問題無法得到解決。所以此方法就不適應了。
我們來看看新的方法。（此方法的原理是不適應fixed，全內容的高度就是body的整體高度，這樣滾動起來就可以處理這些問題了，關鍵就是用到了有滾動條的div）
首先我們結構還是一樣。頁面3個外層div，有頂部input與底部input，中間的可滾動內容通過js計算出來。（這里注意，要關聯計算當前頁面的所有高度，讓內容正好充滿一屏）
<div class="fixedTop" alt="頂部不動的div"> <input type="text" name="" value="輸入框1"> </div> <div class="centerContent"> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> </div> <div class="fixedBottom" alt="底部不動的div"> <input type="text" name="" value="輸入框2"> </div>
css
*{ margin:0; padding: 0; } .fixedTop{ height: 30px; width:100%; background-color: red; } .fixedBottom{ height: 30px; width:100%; background-color: red; } .centerContent{ overflow: auto;/*讓div存在滾動條*/ /*解決ios中滾動div的卡頓問題*/ -webkit-overflow-scroll:touch; -webkit-overflow-scrolling: touch; } .fixedTop input,.fixedBottom input{ width: 100%; height:30px; }
.centerContent的高度通過頁面整體高度-頂部div高度-底部div高度獲得
js操作：
var centerContentH=window.innerHeight-$(".fixedTop").height()-$(".fixedBottom").height();//可滾動區域高度 $(".centerContent").css({"height":centerContentH}); //底部輸入框操作 輸入框獲取焦點時，將頁面滾到最底部去 $(".fixedBottom input").focus(function(){ setTimeout(function(){ $(window).scrollTop(window.innerHeight); },500); });
用這種方法，我們來看下效果：
看，是不是就實現了
我們來看看全部代碼
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta charset="UTF-8"> <title>解決</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> *{ margin:0; padding: 0; } .fixedTop{ height: 30px; width:100%; background-color: red; } .fixedBottom{ height: 30px; width:100%; background-color: red; } .centerContent{ overflow: auto;/*讓div存在滾動條*/ /*解決ios中滾動div的卡頓問題*/ -webkit-overflow-scroll:touch; -webkit-overflow-scrolling: touch; } .fixedTop input,.fixedBottom input{ width: 100%; height:30px; } </style> </head> <body> <div class="fixedTop" alt="頂部不動的div"> <input type="text" name="" value="輸入框1"> </div> <div class="centerContent"> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> </div> <div class="fixedBottom" alt="底部不動的div"> <input type="text" name="" value="輸入框2"> </div> <script type="text/javascript"> var centerContentH=window.innerHeight-$(".fixedTop").height()-$(".fixedBottom").height();//可滾動區域高度 $(".centerContent").css({"height":centerContentH}); //底部輸入框操作 輸入框獲取焦點時，將頁面滾到最底部去 $(".fixedBottom input").focus(function(){ setTimeout(function(){ $(window).scrollTop(window.innerHeight); },500); }); </script> </body> </html>