前几天做一个移动端的页面，要加个像微信那样附着在底部的回复框，按照做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效果，这是一个我认为比较好的解决方法，只要看仔细一点就没啥样式冲突问题。

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

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

    • iscroll.js

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

ios下fixed回复框bug的解决方案的更多相关文章

  1. 移动端踩坑之旅-ios下fixed、软键盘相关问题总结

    最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关 ...

  2. 微信小程序在ios下Echarts图表不能滑动的解决方案

    问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...

  3. 关于IOS下click事件委托失效的解决方案

    一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...

  4. 解决IOS下不支持fixed的问题

    我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focu ...

  5. web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

    1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...

  6. ios下,对于position:fixed支持不完美的额解决方案

    ios下,当有文本框时,会调用输入法,而这个时候,定位(fixed)在底部的东西,就会被弹上例,离底部有段距离,这算是个坑了. 我的解决方案是这样的. 除了定位在底部的元素外,用一个大div把其他元素 ...

  7. iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

    做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...

  8. iOS下的 Fixed BUG

    input 光标位置乱窜 固定式浮层内的输入框光标会发生偏移.即 fixed 定位的容器中输入框光标的位置显示不正确,没有正常地显示在输入框中,而是偏移到了输入框外面 可触发条件 页面body出现滚动 ...

  9. ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

随机推荐

  1. jenkins和hudson---打酱油的日子

    自动化构建:Jenkins起源于Hudson.Hudson在商业软件的路上继续前行,而Jenkins则作为开源软件,从hudson分支出来. 因此现在的jenkins和hudson非常类似,但是随着二 ...

  2. codeforces泛做..

    前面说点什么.. 为了完成日常积累,傻逼呵呵的我决定来一发codeforces 挑水题 泛做.. 嗯对,就是泛做.. 主要就是把codeforces Div.1的ABCD都尝试一下吧0.0.. 挖坑0 ...

  3. 【BZOJ1180】: [CROATIAN2009]OTOCI & 2843: 极地旅行社 LCT

    竟然卡了我....忘记在push_down先下传父亲的信息了....还有splay里for():卡了我10min,但是双倍经验还是挺爽的,什么都不用改. 感觉做的全是模板题,太水啦,不能这么水了... ...

  4. php获取html纯文本，解决编辑器手动键入空格造成的无意义空白字符（空值问题）

    在项目中,我们常常需要用到一些验证,不管是前台还是后台的,上传的问题时,需要内容不为空,但可视化编辑器的介入让手动敲入空格跳出了常规的检测.空格是一种排版的手段,但毫无内容只有空格就显得没有意义了,今 ...

  5. LinkedList实现队列和堆栈的代码

    package 集合; import java.util.LinkedList; /* *队列:先进先出 *把romovelast改成romoveFirst就成了堆栈 先进后出 *  * */publ ...

  6. java并发编程：阻塞队列

    一.几种主要的阻塞队列 自从Java 1.5之后,在java.util.concurrent包下提供了若干个阻塞队列,主要有以下几个: ArrayBlockingQueue:基于数组实现的一个阻塞队列 ...

  7. jenkins，dns错误log过大

    http://stackoverflow.com/questions/31719756/how-to-stop-jenkins-log-from-becoming-huge Recently my j ...

  8. 【iCore3 双核心板_FPGA】实验二十七：基于SDRAM的TFT驱动器的设计

    实验指导书及代码包下载: http://pan.baidu.com/s/1c2dZihE

  9. 优惠分摊算法 php版

    <?php /* * 优惠分摊,算法很多,这里是从shopnc挖出来,适合优惠条件过滤的算法,实质很简单,但是理解难度还是有一点 * * 一个订单的商品,如果不参与某种活动,需要分摊优惠,一般来 ...

  10. 【偶像大师 白金星光】的【Variable Tone】技术大公开！偶像从哪里看都那么可爱，VA小组谈制作方针

    http://game.watch.impress.co.jp/docs/news/1016369.html         自从街机版的运营依赖,今年迎来了[偶像大师]系列的11周年.在CEDEC ...