在ios设备手指输入标签上滚动 [英] Scrolling on ios device finger input tag
问题描述
我在网站上有一些基本表单，有一些输入字段。
如果用户试图滚动页面，并通过将他的手指放在输入框中开始滚动，它不会让页面滚动。
如果他们用手指在身体的某处开始滚动，页面滚动就可以了。
I have a basic form on a site with some input fields. If the user tries to scroll the page, and starts to scroll by placing his finger within an input box, it will not let the page scroll. If they start the scroll with their finger somewhere in the body, the page scrolls just fine.
这个家伙似乎有同样的问题，但他说，以前的开发人员有目的地实现了，我绝对没有这个问题。
输入字段可防止在iPhone上滚动页面
It seems to be the same problem that this guy had, but he said a previous developer had purposefully implemented that and I definitely don't have that problem. Input field prevents page from scrolling on iphone
任何想法？
推荐答案
像这样：
html：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, target-densitydpi=medium-dpi" />
<title>Broken Input Scrolling</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div data-role="page" id="outerDiv">
<div data-role="header">
<h1>Broken Input Scrolling</h1>
</div>
<div data-role="content" id="contentDiv">
<div id="tableDiv">
<table>
<tbody>
<tr>
<td name="nameTitle" id="nameTitle" class="input-row3"><span>Scenario Name</span></td>
<td><input type="email" name="name1" id="name1" placeholder="Scenario 1"/></td>
<td><input type="email" name="name2" id="name2" placeholder="Scenario 2"/></td>
<td><input type="email" name="name3" id="name3" placeholder="Scenario 3"/></td>
<td><input type="email" name="name4" id="name4" placeholder="Scenario 4"/></td>
<td><input type="email" name="name5" id="name5" placeholder="Scenario 5"/></td>
<td><input type="email" name="name6" id="name6" placeholder="Scenario 6"/></td>
<td><input type="email" name="name7" id="name7" placeholder="Scenario 7"/></td>
<td><input type="email" name="name8" id="name8" placeholder="Scenario 8"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
css：
table {
width: 90em;
table-layout:fixed;
}
td {
height: 3em;
width: 10em;
border: 0.1em solid black;
}
#tableDiv {
overflow-x: auto !important;
}
#tableDiv > * {
-webkit-transform: translate3d(0,0,0);
}
事实证明，删除此项修复了问题：
It turns out that removing this piece fixes the issue:
#tableDiv > * {
-webkit-transform: translate3d(0,0,0);
}
这是没有必要的， ）当尝试改善滚动。
This was unnecessary, but was added earlier on in the real project (much larger) when trying to improve scrolling.
我不知道为什么这会导致iOS而不是Android的问题。如果有人可以填写详细信息，为什么会发生这种情况（从而提供更好的答案），他们可以得到一些赏金。
I don't know why this causes an issue for iOS and not Android. If someone could fill in the details around why this occurs (and hence provide a better answer), they can get some of the bounty.
Btw ...你将需要添加更多行或更宽的行，如果使用足够大的屏幕，不需要滚动。
Btw... you will need to add more rows or wider rows if using a big enough screen that no scrolling is needed.
这篇关于在ios设备手指输入标签上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
