ios下fixed回覆框bug的解決方案

時間 2019-11-19

標籤 ios fixed 回覆 bug 解決方案欄目 iOS 简体版

原文原文鏈接

前幾天作一個移動端的頁面，要加個像微信那樣附着在底部的回覆框，按照作PC端網頁的思路，首先是用fixed，在安卓上測了一下是好的，結果到同事的iphone6p上就不行了，點擊輸入框以後它總會跳到屏幕中間去。ios

後來才知道這是ios下一個廣泛的bug，因此我決定把緣由和解決方案整理一下，以方便後人。git

網上有的人說用那個iscroll.js來解決，不過那樣會出現不少樣式上的衝突，並且爲了一個fixed的bug就動用一個js，未免有點大材小用了。github

緣由

ios下面，軟鍵盤喚起後，頁面的 fixed 元素將失效（即沒法浮動，也能夠理解爲變成了 absolute 定位），因此當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。web

解決方法

三段式佈局

代碼以下：微信

<style>
    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;
    }

    main .content {
        height: 2000px;
    }
    /* 元素內的滾動很是不流暢，滑動的手指鬆開後，滾動馬上中止，失去了本來的流暢滾動特性，給main加上以下代碼便可。 */
    main {
    /* main絕對定位，進行內部滾動 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之能夠滾動 */
    overflow-y: scroll;
    /* 增長該屬性，能夠增長彈性 */
    -webkit-overflow-scrolling: touch;
}
</style>
<body class="layout-scroll-fixed">
    <!-- fixed定位的頭部 -->
    <header>

    </header>

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

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

</body>

能夠參考我作的：DEMOiphone

這裏是用了absolute來代替fixed效果，這是一個我認爲比較好的解決方法，只要看仔細一點就沒啥樣式衝突問題。jsp