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

JS监控输入框到屏幕顶的高度

用js监控focus时的高度，而后控制变化，这个会出现回复框停留一段时间的问题。不建议用这种方法，具体代码网上有不少。布局
iscroll.js

不在万不得已的状况下，咱们尽可能尝试一下不依赖第三方库的布局方案，注意别冲突掉样式和功能。code

ios下fixed回复框bug的解决方案

缘由

解决方法

三段式布局

JS监控输入框到屏幕顶的高度

iscroll.js