做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 。測試後效果是一樣的。

按照上面佈局，就不會出現問題了！

另外一種方案

這個方案是最近在網上看到的，我沒有使用過，但是看到案例是沒有問題的，感興趣的可以去看下，我在前端資源庫中已經發布了這個方案。

歡迎訪問留言！