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

最新推荐文章于 2021-12-06 17:20:08 发布

abtm25101

最新推荐文章于 2021-12-06 17:20:08 发布

阅读量150

点赞数

原文链接：http://www.cnblogs.com/qitiandandan/p/5749596.html

版权

前几天做一个移动端的页面，要加个像微信那样附着在底部的回复框，按照做PC端网页的思路，首先是用fixed，在安卓上测了一下是好的，结果到朋友的iphone6p上就不行了，点击输入框之后它总会跳到屏幕中间去。

后来才知道这是ios下一个普遍的bug，所以我决定把原因和解决方案整理一下，以方便后人。

网上有的人说用那个iscroll.js来解决，不过那样会出现很多样式上的冲突，而且为了一个fixed的bug就动用一个js，未免有点大材小用了。

原因

ios下面，软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。

解决方法

三段式布局

代码如下：

<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>

　可查看我的DEMO

这里是用了absolute来代替fixed效果，这是一个我认为比较好的解决方法，只要看仔细一点就没啥样式冲突问题。