移動端業(yè)務開發(fā)昏翰，iOS 下經常會有 fixed 元素和輸入框(input 元素)同時存在的情況或渤。 但是 fixed 元素在有軟鍵盤喚起的情況下罢维，會出現(xiàn)許多莫名其妙的問題太抓。 這篇文章里就提供一個簡單的有輸入框情況下的 fixed 布局方案空闲。
iOS下的 Fixed + Input BUG現(xiàn)象
// html
<body class="layout-fixed">
<!-- fixed定位的頭部 -->
<header>
</header>
<!-- 可以滾動的區(qū)域 -->
<main>
<!-- 內容在這里... -->
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
// css如下
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
}
問題描述： 軟鍵盤喚起后，頁面的 fixed 元素將失效（即無法浮動腻异，也可以理解為變成了 absolute 定位）进副，所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了悔常。
條件：
- 頁面使用原生滾動（body）;
解決方案：
- 使用iscroll等第三方庫布局方案;
- 不使用原生滾動（body）;
// 不使用原生滾動（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絕對定位影斑，進行內部滾動 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滾動 */
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
main .content {
height: 2000px;
}
擴展閱讀：
overflow-scrolling,will-change等屬性會觸發(fā)新的層疊上下文。
啟用GPU硬件加速的屬性机打。
transform對普通元素的N多渲染影響
- 影響層疊上下文
- 影響元素的fixed的跟隨效果
- 影響元素的參照物
- z-index,opactiy值不為1,transform不是none,will-change
