ios下输入框input进行fixed定位 bug

在做移动端开发时，经常会遇到，弹窗框内有input输入框，这可以说与ios相爱相杀了。

一个很让人头疼的问题，就是ios下面的input输入框fixed定位。

1、先来看代码结构

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>评选最受欢迎场馆</title>
<style>
   .box {
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }
</style>

</head>
<body>
<div id="box">
    <ul>
        <li>aaaaaaaa</li>
                <li>aaaaaaaa</li>
                <li>aaaaaaaa</li>
                <li>aaaaaaaa</li>
                <li>aaaaaaaa</li>
    </ul>
    <div class="footer">
        <input type="text"/>
    <div>
</div>

</body>
</html>

写完后，我们在移动端进行调试，发现安卓是正常的，但是ios 会出现下面的情况

2、现在我们来探究一下出现这个问题的原因。根据网上各路大神的说法，试了不少。总结起来，就是当软键盘唤起后，页面的fixed会失效，变成absolute，结果就是当屏幕数据超过一屏时，滑动页面，input框也会跟着一起滚动。

解决：也就是说，如果使用fixed的父元素数据不超过一屏，禁止滚动，那么即使变成了absolute页面也不会有什么变化。那么我们可以，把结构改成，在body里面分为两个部分，需要滚动的部分移动到，<div class="content"></div>,需要定位的部分，单独写一个<div class="footer"></div>：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>ios input聚焦fixed定位</title>
<style>

.content {
//内容进行absolute定位，内部滚动
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  //解决ios下滚动不流畅的问题
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 34px;
}
</style>

</head>
<body>
<div class="content">
    <ul>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
    </ul>
</div>
<div class="footer"><input type="text"></div>

</body>
</html>

要提醒一下，content 和 footer 要直接写在body底下，如果他们两个外面还有一层div，那样布局是无效得。

这样就可以解决上面得问题，并且输入框是一直贴着软键盘得。

但是当软键盘唤起，这个时候滚动页面，input还是会随着页面滚动。不过，解决到这个程度也算能用了。

至于滚动，如果有大神解决掉的话，麻烦@一下小菜

ios下输入框input进行fixed定位 bug

猜你喜欢