iOS下的 Fixed + Input 調用鍵盤的時候fixed無效問題解決方案

時間 2019-11-05

標籤 ios fixed input 調用鍵盤時候無效問題解決方案欄目 iOS 简体版

原文原文鏈接

https://www.haorooms.com/post/ios_fixed_inputhtml

作touchweb開發的時候，作頭疼的是，電腦上面時候好的，有些手機上面也是好的，個別手機和瀏覽器出現問題，對於這些，只能慢慢調試，找問題。前端

今天說一下比較老的IOS的問題，那就是「iOS下的 Fixed + Input 調用鍵盤的時候fixed無效問題」。ios

案例以下

<body class="layout-fixed">
    <!-- fixed定位的頭部 -->
    <header>

    </header>

    <!-- 能夠滾動的區域 -->
    <main>
        <!-- 內容在這裏... -->
    </main>

    <!-- fixed定位的底部 -->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>

對應的樣式以下：web

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 屬性失效了！post

這是爲何呢？簡單解釋下： > 軟鍵盤喚起後，頁面的 fixed 元素將失效（即沒法浮動，也能夠理解爲變成了 absolute 定位），因此當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。測試

這即是 iOS 上 fixed 元素和輸入框的 bug 。其中不只限於 type=text 的輸入框，凡是軟鍵盤（好比時間日期選擇、select 選擇等等）被喚起，都會遇到一樣地問題。spa

雖然 isScroll.js 能夠很好的解決 fixed 定位滾動的問題，可是不在萬不得已的狀況下，咱們儘可能嘗試一下不依賴第三方庫的佈局方案，以簡化實現方式。這裏拋磚引玉做爲參考。調試

解決思路

既然在 iOS 下因爲軟鍵盤喚出後，頁面 fixed 元素會失效，致使跟隨頁面一塊兒滾動，那麼假如——頁面不會過長出現滾動，那麼即使 fixed 元素失效，也沒法跟隨頁面滾動，也就不會出現上面的問題了。

那麼按照這個思路，若是使 fixed 元素的父級不出現滾動，而將原 body 滾動的區域域移到 main 內部，而 header 和 footer 的樣式不變，代碼以下：

<body class="layout-scroll-fixed">
    <!-- fixed定位的頭部 (absolute絕對定位也能夠)-->
    <header>

    </header>

    <!-- 能夠滾動的區域 -->
    <main>
        <div class="content">
        <!-- 內容在這裏... -->
        </div>
    </main>

    <!-- fixed定位的底部 （absolute絕對定位也能夠）-->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="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 。測試後效果是同樣的。

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