关于移动端 fixed 布局在输入框弹出错位的问题

前言

最近，在实现移动端 css 布局的时候，遇到一个坑，即在position:fixed布局下，输入框在弹出时，会出现错位的情况。

解决思路

个人猜测应该是当页面是滚动时，弹起键盘输入时，页面上的 fixed 属性会变成 absolute。
解决思路：让页面不滚动，所以这里就需要有个容器包裹滚动的内容，使得浏览器不会出现滚动条。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<body>
  <header></header>
  <div class="main">
    <div class="container">
      我是内容，我是内容！
      <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！ <br />
      我是内容，我是内容！
      <br />
    </div>
  </div>
  <footer>
    <input type="text" placeholder="来，输入手机号吧" />
    <button class="submit">确定</button>
  </footer>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
body {
  margin: 0;
  padding: 0px;
}

header {
  position: fixed;
  height: 30px;
  line-height: 30px;
  width: 100%;
  top: 0px;
  background: #ccc;
}

.main {
  position: absolute;
  top: 30px;
  width: 100%;
  bottom: 40px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.mian .container {
  height: 1200px;
  width: 100%;
  background: #fff;
}

footer {
  position: fixed;
  height: 40px;
  line-height: 40px;
  width: 100%;
  bottom: 0px;
  background: #ccc;
}

footer input,
footer button {
  font-size: 18px;
}

我们可以看到有一个属性设置-webkit-overflow-scrolling: touch;, 这个属性很重要，如果不加这个属性的话，滚动起来会感觉不够流畅。这是-webkit-专有的特性，用来快速滚动和回弹效果。

[本文谢绝转载，谢谢]

分类: 技术
粤ICP备2022084378号