大家好皇拣，我是IT修真院武漢分院第10期學(xué)員余佳貝，一枚正直善良的web程序員薄嫡。
今天給大家分享一下氧急，修真院官網(wǎng)css任務(wù)4，深度思考中的知識(shí)點(diǎn)——使用fixed的時(shí)候毫深，在手機(jī)上看是否會(huì)有問題吩坝，怎么解決？
1.背景介紹
移動(dòng)端業(yè)務(wù)開發(fā)哑蔫，iOS下經(jīng)常會(huì)有fixed元素和輸入框(input元素)同時(shí)存在的情況钉寝。但是fixed元素在有軟鍵盤喚起的情況下弧呐，會(huì)出現(xiàn)許多莫名其妙的問題。 下面我們就來一起分析在一個(gè)簡(jiǎn)單的有輸入框情況下的fixed布局方案嵌纲。
2.知識(shí)剖析
IOS下的fixed+input出現(xiàn)的bug現(xiàn)象
下面俘枫，我們舉一個(gè)簡(jiǎn)單的例子來說明這個(gè)現(xiàn)象(以下是我們常用的fixed布局)
<header></header><main></main><footer>? ? ? ? ?<input type="text">? ? ? ? ?<button type="submit" value="提交"></footer>
我們給上面的html加一個(gè)樣式，如下
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
}
我們?cè)谑謾C(jī)上打開疹瘦，拖動(dòng)頁(yè)面時(shí) header 和 footer 已經(jīng)定位在了對(duì)應(yīng)的位置崩哩，目測(cè)沒問題了。
但是我們一旦點(diǎn)擊輸入框言沐，底部軟鍵盤被喚起后邓嘹，就會(huì)出現(xiàn)這種現(xiàn)象
我們可以看到，fixed的footer和header跑到屏幕中間去了
fixed 定位好的元素跟隨頁(yè)面滾動(dòng)了起來… fixed 屬性失效了险胰！這是為什么呢汹押？
簡(jiǎn)單解釋下： > 軟鍵盤喚起后，頁(yè)面的 fixed 元素將失效（即無法浮動(dòng)起便，也可以理解為變成了 absolute 定位）棚贾，所以當(dāng)頁(yè)面超過一屏且滾動(dòng)時(shí)，失效的 fixed 元素就會(huì)跟隨滾動(dòng)了榆综。
這便是 iOS 上 fixed 元素和輸入框的 bug 妙痹。其中不僅限于 type=text 的輸入框，凡是軟鍵盤（比如時(shí)間日期選擇鼻疮、select 選擇等等）被喚起怯伊，都會(huì)遇到同樣地問題。
4解決方案
既然在 iOS 下由于軟鍵盤喚出后判沟，頁(yè)面 fixed 元素會(huì)失效耿芹，導(dǎo)致跟隨頁(yè)面一起滾動(dòng)，
那么假如——頁(yè)面不會(huì)過長(zhǎng)出現(xiàn)滾動(dòng)挪哄，那么即便 fixed 元素失效吧秕，也無法跟隨頁(yè)面滾動(dòng)，也就不會(huì)出現(xiàn)上面的問題了迹炼。
那么按照這個(gè)思路砸彬，如果使 fixed 元素的父級(jí)不出現(xiàn)滾動(dòng)，而將原 body 滾動(dòng)的區(qū)域域移到 main 內(nèi)部斯入，而 header 和 footer 的樣式不變拿霉，代碼如下：
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絕對(duì)定位，進(jìn)行內(nèi)部滾動(dòng) */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滾動(dòng) */
overflow-y: scroll;
}
main .content {
height: 2000px;
}
可以看到咱扣，在原始輸入法下绽淘， fixed 元素可以定位在頁(yè)面的正確位置。滾動(dòng)頁(yè)面時(shí)闹伪，由于滾動(dòng)的是 main 內(nèi)部的 div沪铭，因此 footer 沒有跟隨頁(yè)面滾動(dòng)
上面貌似解決了問題壮池，但是如果在手機(jī)上實(shí)際測(cè)試一下，會(huì)發(fā)現(xiàn) main 元素內(nèi)的滾動(dòng)非常不流暢杀怠，滑動(dòng)的手指松開后椰憋，
滾動(dòng)立刻停止，失去了原本的流暢滾動(dòng)特性赔退。百度一下彈性滾動(dòng)的問題橙依，發(fā)現(xiàn)在 webkit 中，下面的屬性可以恢復(fù)彈性滾動(dòng)硕旗。
-webkit-overflow-scrolling: touch;
6 拓展思考
安卓下會(huì)出現(xiàn)這種情況嗎窗骑，存在的話怎么解決？
談到了 iOS 漆枚，也來簡(jiǎn)單說一下 Android 下的布局吧创译。
在 Android2.3+ 中，因?yàn)椴恢С?overflow-scrolling 墙基，因此部分瀏覽器內(nèi)滾動(dòng)會(huì)有不流暢的卡頓软族。但是目前發(fā)現(xiàn)在 body 上的滾動(dòng)還是很流暢的，因此使用第一種在 iOS 出現(xiàn)問題的 fixed 定位的布局就可以了残制。如果需要考慮 Android2.3 以下系統(tǒng)立砸，因?yàn)椴恢С?fixed 元素，所以依然要需要考慮使用 isScroll.js 來實(shí)現(xiàn)內(nèi)部滾動(dòng)初茶。
其實(shí)在 fixed 和輸入框的問題上颗祝，基本思路就是： > 由于 fixed 在軟鍵盤喚起后會(huì)失效，導(dǎo)致在頁(yè)面可以滾動(dòng)時(shí)纺蛆，會(huì)跟隨頁(yè)面一起滾動(dòng)吐葵。因此如果頁(yè)面無法滾動(dòng)规揪，那么 fixed 元素即使失效桥氏，也不會(huì)滾動(dòng)，也就不會(huì)出現(xiàn) bug 了
7.參考文獻(xiàn)
參考一：http://blog.csdn.net/ly2983068126/article/details/49306427"target="_blank">移動(dòng)端Web頁(yè)面使用fixed總結(jié)
參考二：http://www.grycheng.com/?p=1534"target="_blank">移動(dòng)端position:fixed總結(jié)
8.更多討論
1 fixed在各種瀏覽器中會(huì)有不同的表現(xiàn)么猛铅？
2 position:absolute/relative在移動(dòng)端也會(huì)出現(xiàn)不同的現(xiàn)象么字支？
