Html `-webkit-overflow-scrolling: touch` 在 iOS7 中最初的屏幕外元素被破坏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18736297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
`-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7
提问by Nick H247
Seeing as GM seed has been released, we can talk about it now!
既然转基因种子已经出炉了，我们现在可以谈谈了！
Looks like in iOS7 "-webkit-overflow-scrolling: touch" is broken. touch events for elements that are initially off screen do not fire (or in some cases are just unreliable).
看起来在 iOS7 中“-webkit-overflow-scrolling: touch”坏了。最初在屏幕外的元素的触摸事件不会触发（或者在某些情况下只是不可靠）。
Here is an example:
下面是一个例子：
<!DOCTYPE html><html>
<head><title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
#scrollbox {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.touchDiv {
position: relative;
width:100%;
height:80px;
background-color: #FFBBBB;
}
ul, li {
text-indent: 0px;
list-style: none;
padding: 0px;
margin: 0px;
}
li {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
</style>
<script type="text/javascript">
function onBodyLoad() {
var touchDiv = document.getElementById("bottomDiv");
touchDiv.ontouchstart = function(e) {
alert("touched");
};
touchDiv = document.getElementById("topDiv");
touchDiv.ontouchstart = function(e) {
alert("touched");
};
}
</script>
</head>
<body onload="onBodyLoad()">
<div id='scrollbox'>
<div id="topDiv" class="touchDiv">Fires an event when touched</div>
<ul>
<li><a href='#' onclick="alert('1')">Link 1</a></li>
<li><a href='#' onclick="alert('3')">Link 3</a></li>
<li><a href='#' onclick="alert('4')">Link 4</a></li>
<li><a href='#' onclick="alert('5')">Link 5</a></li>
<li><a href='#' onclick="alert('6')">Link 6</a></li>
<li><a href='#' onclick="alert('7')">Link 7</a></li>
<li><a href='#' onclick="alert('8')">Link 8</a></li>
<li><a href='#' onclick="alert('9')">Link 9</a></li>
<li><a href='#' onclick="alert('10')">Link 10</a></li>
<li><a href='#' onclick="alert('11')">Link 11</a></li>
<li><a href='#' onclick="alert('12')">Link 12</a></li>
<li><a href='#' onclick="alert('13')">Link 13</a></li>
<li><a href='#' onclick="alert('14')">Link 14</a></li>
<li><a href='#' onclick="alert('15')">Link 15</a></li>
<li><a href='#' onclick="alert('16')">Link 16</a></li>
<li><a href='#' onclick="alert('17')">Link 17</a></li>
<li><a href='#' onclick="alert('18')">Link 18</a></li>
<li><a href='#' onclick="alert('19')">Link 19</a></li>
<li><a href='#' onclick="alert('20')">Link 20</a></li>
<li><a href='#' onclick="alert('21')">Link 21</a></li>
<li><a href='#' ontouchstart="alert('22')">Link 22</a></li>
</ul>
<div id="bottomDiv" class="touchDiv">Fires an event when touched 2</div>
</div>
</body>
I guess this will break the majority of mobile optimised web apps.
我猜这会破坏大多数移动优化的网络应用程序。
Any issues with the above code? And/or are there any workarounds?
上面的代码有问题吗？和/或是否有任何解决方法？
(I have already raised a bug with apple - some time ago, and no response)
（我已经向苹果提出了一个错误 - 前段时间，没有回应）
回答by Nick H247
Looks like there is a workaround to this problem on apple dev forums
看起来在苹果开发论坛上有一个解决这个问题的方法
So many thanks to Mr Baicoianu.
非常感谢 Baicoianu 先生。
Basically you need to listen to touch events on the parent scroll div. So in my case add:
基本上你需要监听父滚动 div 上的触摸事件。所以在我的情况下添加：
document.getElementById("scrollbox").addEventListener('touchstart', function(event){});
to the onBodyLoad function.
到 onBodyLoad 函数。
I guess this is some event propagation issue, solved by listening at a higher level.
我想这是一些事件传播问题，可以通过在更高级别上进行侦听来解决。
回答by DigitalJohn
The above answer works a treat for me. Here is the jQuery version of the above fix:
上面的答案对我来说是一种享受。这是上述修复的 jQuery 版本：
$('#scrollbox').on('touchstart', function(event){});
