iOS下的 Fixed BUG

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

weixin_34357436

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

阅读量152

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016820155

探讨fixed定位下input光标位置偏移问题，分析原因及触发条件，提供iOS下解决方案，确保input位置正确。

input 光标位置乱窜

固定式浮层内的输入框光标会发生偏移。即 fixed 定位的容器中输入框光标的位置显示不正确，没有正常地显示在输入框中，而是偏移到了输入框外面

图片描述

可触发条件

页面body出现滚动条
点击页面出现用fixed定位的弹框，弹框内有输入框，键盘弹起，页面发生滚动
键盘弹起后手动滚动页面

通过调试工具发现键盘弹起视图向上调整了，但页面中元素所占的位置，其实并没有向上进行调整；输入框所占的位置还是原来键盘未弹起时的位置

input位置

图片描述

原因

软键盘唤起后，页面的 fixed 元素将失效，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了

不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题

解决思路

iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，倘若页面不会过长出现滚动，即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了

.content {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}

<body>
    <div class="content">
       <!-- 内容在这里... -->
    </div>   
</body>

这样不管是弹框里的input还是input位置都能一劳永逸

iOS下的 Fixed BUG

input 光标位置乱窜

可触发条件

input位置

原因

解决思路

相关资源