iOS下的 Fixed + Input 呼叫鍵盤的時候fixed無效問題解決方案
做touchweb開發的時候,做頭疼的是,電腦上面時候好的,有些手機上面也是好的,個別手機和瀏覽器出現問題,對於這些,只能慢慢除錯,找問題。
今天說一下比較老的IOS的問題,那就是“iOS下的 Fixed + Input 呼叫鍵盤的時候fixed無效問題”。
案例如下
<bodyclass="layout-fixed"><!-- fixed定位的頭部 --><header></header><!-- 可以滾動的區域 --><main><!-- 內容在這裡... --></main><!-- fixed定位的底部 --> <footer><inputtype="text"placeholder="Footer..."/><buttonclass="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 {
margin-top:50px;
margin-bottom:34px;
height:2000px}
然後看起來就是下面這個樣子。拖動頁面時 header 和 footer 已經定位在了對應的位置,目測沒問題了。
但接下來問題就來了!如果底部輸入框軟鍵盤被喚起以後,再次滑動頁面,就會看到如下圖所示:
我們看到 fixed 定位好的元素跟隨頁面滾動了起來… fixed 屬性失效了!
這是為什麼呢?簡單解釋下: > 軟鍵盤喚起後,頁面的 fixed 元素將失效(即無法浮動,也可以理解為變成了 absolute 定位),所以當頁面超過一屏且滾動時,失效的 fixed 元素就會跟隨滾動了。
這便是 iOS 上 fixed 元素和輸入框的 bug 。其中不僅限於 type=text 的輸入框,凡是軟鍵盤(比如時間日期選擇、select 選擇等等)被喚起,都會遇到同樣地問題。
雖然 isScroll.js 可以很好的解決 fixed 定位滾動的問題,但是不在萬不得已的情況下,我們儘量嘗試一下不依賴第三方庫的佈局方案,以簡化實現方式。這裡拋磚引玉作為參考。
解決思路
既然在 iOS 下由於軟鍵盤喚出後,頁面 fixed 元素會失效,導致跟隨頁面一起滾動,那麼假如——頁面不會過長出現滾動,那麼即便 fixed 元素失效,也無法跟隨頁面滾動,也就不會出現上面的問題了。
那麼按照這個思路,如果使 fixed 元素的父級不出現滾動,而將原 body 滾動的區域域移到 main 內部,而 header 和 footer 的樣式不變,程式碼如下:
<bodyclass="layout-scroll-fixed"><!-- fixed定位的頭部 (absolute絕對定位也可以)--><header></header><!-- 可以滾動的區域 --><main><divclass="content"><!-- 內容在這裡... --></div></main><!-- fixed定位的底部 (absolute絕對定位也可以)--><footer><inputtype="text"placeholder="Footer..."/><buttonclass="submit">提交</button></footer></body>
header, footer, main {
display: block;
}
header {
position: fixed;//或者absolute
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;//或者寫成absolute
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main絕對定位,進行內部滾動 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滾動 */
overflow-y: scroll;
/* 增加該屬性,可以增加彈性,是滑動更加順暢 */
-webkit-overflow-scrolling: touch;
}
main .content {
height: 2000px;
}
另外,這裡的 header 和 footer 使用的是 fixed 定位,如果考慮到更老一些的 iOS 系統不支援 fixed 元素,完全可以把 fixed 替換成 absolute 。測試後效果是一樣的。
按照上面佈局,就不會出現問題了!
另外一種方案
這個方案是最近在網上看到的,我沒有使用過,但是看到案例是沒有問題的,感興趣的可以去看下,我在前端資源庫中已經發布了這個方案。
歡迎訪問留言!