原文 http://efe.baidu.com/blog/mobile-fixed-layout/
移動端業(yè)務(wù)開發(fā)，iOS 下經(jīng)常會有 fixed 元素和輸入框(input 元素)同時(shí)存在的情況陋率。 但是 fixed 元素在有軟鍵盤喚起的情況下沛简，會出現(xiàn)許多莫名其妙的問題。 這篇文章里就提供一個簡單的有輸入框情況下的 fixed 布局方案贪壳。
iOS下的 Fixed + Input BUG現(xiàn)象
讓我們先舉個栗子饱亿，最直觀的說明一下這個 BUG 的現(xiàn)象。 常規(guī)的 fixed 布局闰靴，可能使用如下布局（以下僅示意代碼）：
<body class="layout-fixed">
<!-- fixed定位的頭部 -->
<header>
</header>
<!-- 可以滾動的區(qū)域 -->
<main>
<!-- 內(nèi)容在這里... -->
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
對應(yīng)的樣式如下：
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 {
margin-top: 50px;
margin-bottom: 34px;
height: 2000px
}
然后看起來就是下面這個樣子彪笼。拖動頁面時(shí) header 和 footer 已經(jīng)定位在了對應(yīng)的位置，目測沒問題了蚂且。
fixed定位
但接下來問題就來了配猫！如果底部輸入框軟鍵盤被喚起以后，再次滑動頁面杏死，就會看到如下圖所示：
我們看到 fixed 定位好的元素跟隨頁面滾動了起來… fixed 屬性失效了章姓！
這是為什么呢？簡單解釋下： > 軟鍵盤喚起后识埋，頁面的 fixed 元素將失效（即無法浮動凡伊，也可以理解為變成了 absolute 定位），所以當(dāng)頁面超過一屏且滾動時(shí)窒舟，失效的 fixed 元素就會跟隨滾動了系忙。
這便是 iOS 上 fixed 元素和輸入框的 bug 。其中不僅限于 type=text 的輸入框惠豺，凡是軟鍵盤（比如時(shí)間日期選擇银还、select 選擇等等）被喚起风宁，都會遇到同樣地問題。
雖然 isScroll.js 可以很好的解決 fixed 定位滾動的問題蛹疯，但是不在萬不得已的情況下戒财，我們盡量嘗試一下不依賴第三方庫的布局方案，以簡化實(shí)現(xiàn)方式捺弦。這里拋磚引玉作為參考饮寞。
解決思路：
既然在 iOS 下由于軟鍵盤喚出后，頁面 fixed 元素會失效列吼，導(dǎo)致跟隨頁面一起滾動幽崩，那么假如——頁面不會過長出現(xiàn)滾動，那么即便 fixed 元素失效寞钥，也無法跟隨頁面滾動慌申，也就不會出現(xiàn)上面的問題了。
那么按照這個思路理郑，如果使 fixed 元素的父級不出現(xiàn)滾動蹄溉，而將原 body 滾動的區(qū)域域移到 main 內(nèi)部，而 header 和 footer 的樣式不變您炉，代碼如下：
<body class="layout-scroll-fixed">
<!-- fixed定位的頭部 -->
<header>
</header>
<!-- 可以滾動的區(qū)域 -->
<main>
<div class="content">
<!-- 內(nèi)容在這里... -->
</div>
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
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絕對定位柒爵，進(jìn)行內(nèi)部滾動 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滾動 */
overflow-y: scroll;
}
main .content {
height: 2000px;
}
這樣再來看一下：
fixed定位
在原始輸入法下， fixed 元素可以定位在頁面的正確位置邻吭。滾動頁面時(shí)餐弱，由于滾動的是 main 內(nèi)部的 div，因此 footer 沒有跟隨頁面滾動囱晴。
上面貌似解決了問題膏蚓，但是如果在手機(jī)上實(shí)際測試一下，會發(fā)現(xiàn) main 元素內(nèi)的滾動非常不流暢畸写，滑動的手指松開后驮瞧，滾動立刻停止，失去了原本的流暢滾動特性枯芬。百度一下彈性滾動的問題论笔，發(fā)現(xiàn)在 webkit 中，下面的屬性可以恢復(fù)彈性滾動千所。
-webkit-overflow-scrolling: touch;
在 main 元素上加上該屬性狂魔，嗯，絲般順滑的感覺又回來了淫痰！
main {
/* main絕對定位最楷，進(jìn)行內(nèi)部滾動 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滾動 */
overflow-y: scroll;
/* 增加該屬性，可以增加彈性 */
-webkit-overflow-scrolling: touch;
}
另外，這里的 header 和 footer 使用的是 fixed 定位籽孙，如果考慮到更老一些的 iOS 系統(tǒng)不支持 fixed 元素烈评，完全可以把 fixed 替換成 absolute 。測試后效果是一樣的犯建。
至此一個不依賴第三方庫的 fixed 布局就完成了讲冠。
Android 下布局
談到了 iOS ，也來簡單說一下 Android 下的布局吧适瓦。
在 Android2.3+ 中竿开，因?yàn)椴恢С?overflow-scrolling ，因此部分瀏覽器內(nèi)滾動會有不流暢的卡頓犹菇。但是目前發(fā)現(xiàn)在 body 上的滾動還是很流暢的德迹，因此使用第一種在 iOS 出現(xiàn)問題的 fixed 定位的布局就可以了芽卿。
如果需要考慮 Android2.3 以下系統(tǒng)揭芍，因?yàn)椴恢С?fixed 元素，所以依然要需要考慮使用 isScroll.js 來實(shí)現(xiàn)內(nèi)部滾動卸例。
其實(shí)在 fixed 和輸入框的問題上称杨，基本思路就是： > 由于 fixed 在軟鍵盤喚起后會失效，導(dǎo)致在頁面可以滾動時(shí)筷转，會跟隨頁面一起滾動姑原。因此如果頁面無法滾動，那么 fixed 元素即使失效呜舒，也不會滾動锭汛，也就不會出現(xiàn) bug 了。
所以可以在這個方面去考慮解決問題袭蝗。
其他的一些細(xì)節(jié)處理
在細(xì)節(jié)處理上唤殴，其實(shí)還有很多要注意的，挑幾個實(shí)際遇到比較大的問題來說一下：
有時(shí)候輸入框 focus 以后到腥，會出現(xiàn)軟鍵盤遮擋輸入框的情況朵逝，這時(shí)候可以嘗試 input 元素的 scrollIntoView 進(jìn)行修復(fù)。
在 iOS 下使用第三方輸入法時(shí)乡范，輸入法在喚起經(jīng)常會蓋住輸入框配名，只有在輸入了一條文字后，輸入框才會浮出晋辆。目前也不知道有什么好的辦法能讓喚起輸入框時(shí)正確顯示渠脉。這暫時(shí)算是 iOS 下的一個坑吧。
有些第三方瀏覽器底部的工具欄是浮在頁面之上的瓶佳，因此底部 fixed 定位會被工具欄遮擋芋膘。解決辦法也比較簡單粗暴——適配不同的瀏覽器，調(diào)整 fixed 元素距離底部的距離。
最好將 header 和 footer 元素的 touchmove 事件禁止索赏，以防止?jié)L動在上面觸發(fā)了部分瀏覽器全屏模式切換盼玄，而導(dǎo)致頂部地址欄和底部工具欄遮擋住 header 和 footer 元素。
在頁面滾動到上下邊緣的時(shí)候潜腻，如果繼續(xù)拖拽會將整個 View 一起拖拽走埃儿，導(dǎo)致頁面的“露底”。
fixed定位
為了防止頁面露底融涣，可以在頁面拖拽到邊緣的時(shí)候童番，通過判斷拖拽方向以及是否為邊緣來阻止 touchmove 事件，防止頁面繼續(xù)拖拽威鹿。
以上面內(nèi)滾動 layout-scroll-fixed
布局為例剃斧，給出一段代碼作為參考：
// 防止內(nèi)容區(qū)域滾到底后引起頁面整體的滾動
var content = document.querySelector('main');
var startY;
content.addEventListener('touchstart', function (e) {
startY = e.touches[0].clientY;
});
content.addEventListener('touchmove', function (e) {
// 高位表示向上滾動
// 底位表示向下滾動
// 1容許 0禁止
var status = '11';
var ele = this;
var currentY = e.touches[0].clientY;
if (ele.scrollTop === 0) {
// 如果內(nèi)容小于容器則同時(shí)禁止上下滾動
status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
} else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
// 已經(jīng)滾到底部了只能向上滾動
status = '10';
}
if (status != '11') {
// 判斷當(dāng)前的滾動方向
var direction = currentY - startY > 0 ? '10' : '01';
// 操作方向和當(dāng)前允許狀態(tài)求與運(yùn)算，運(yùn)算結(jié)果為0忽你，就說明不允許該方向滾動幼东，則禁止默認(rèn)事件，阻止?jié)L動
if (!(parseInt(status, 2) & parseInt(direction, 2))) {
stopEvent(e);
}
}
});
