移动浏览器弹出键盘时,会尝试滚动条以便让输入框仍然在视图中。
iOS Safari似乎通过找到最近的滚动父级来正确执行此操作。
在Android本地或Chrome移动浏览器中,它似乎只尝试使用body元素,然后放弃,因此聚焦的输入框被键盘隐藏。
如何打破它
在body元素上设置overflow-y: hidden
。创建一个可滚动的容器并将表单放入其中。
当您选择屏幕底部附近的元素时,它将被键盘遮挡。
演示
http://dominictobias.com/android-scroll-bug/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Android scroll/focus bug</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.scroll {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
}
input {
margin-bottom: 20px;
width: 100%;
}
</style>
</head>
<body>
<div class="scroll">
<input type="text" value="Input 1">
<input type="text" value="Input 2">
<input type="text" value="Input 3">
<input type="text" value="Input 4">
<input type="text" value="Input 5">
<input type="text" value="Input 6">
<input type="text" value="Input 7">
<input type="text" value="Input 8">
<input type="text" value="Input 9">
<input type="text" value="Input 10">
<input type="text" value="Input 11">
<input type="text" value="Input 12">
<input type="text" value="Input 13">
<input type="text" value="Input 14">
<input type="text" value="Input 15">
<input type="text" value="Input 16">
<input type="text" value="Input 17">
<input type="text" value="Input 18">
<input type="text" value="Input 19">
<input type="text" value="Input 20">
</div>
</body>
</html>
有什么想法可以修复这个问题吗?需要进行一些浏览器检测和混乱的hack吗?
<div class="scroll">
- Matt Derrick