`-webkit-overflow-scrolling: touch` 在 iOS7 中最初的屏幕外元素被破坏 [英] `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7
问题描述
既然已经发布了转基因种子，我们现在可以谈谈了！
看起来在 iOS7 中-webkit-overflow-scrolling: touch"坏了.最初在屏幕外的元素的触摸事件不会触发(或者在某些情况下只是不可靠).
这是一个例子:
<head><title>TEST</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"/><风格>#滚动框{位置:固定；顶部:0px；宽度:100%；高度:100%；溢出:滚动；-webkit-overflow-scrolling:触摸；}.touchDiv {位置:相对；宽度:100%；高度:80px；背景颜色:#FFBBBB；}你，李{文本缩进:0px；列表样式:无；填充:0px；边距:0px；}李{填充顶部:10px；填充底部:10px；边框底部:1px 实心 #333；}</风格><script type="text/javascript">函数 onBodyLoad() {var touchDiv = document.getElementById("bottomDiv");touchDiv.ontouchstart = 函数(e){警报(触摸")；};touchDiv = document.getElementById("topDiv");touchDiv.ontouchstart = 函数(e){警报(触摸")；};}<body onload="onBodyLoad()"><div id='scrollbox'><div id="topDiv" class="touchDiv">触摸时触发事件</div><ul><li><a href='#' onclick="alert('1')">链接 1</a></li><li><a href='#' onclick="alert('3')">链接 3</a></li><li><a href='#' onclick="alert('4')">链接 4</a></li><li><a href='#' onclick="alert('5')">链接 5</a></li><li><a href='#' onclick="alert('6')">链接 6</a></li><li><a href='#' onclick="alert('7')">链接 7</a></li><li><a href='#' onclick="alert('8')">链接 8</a></li><li><a href='#' onclick="alert('9')">链接 9</a></li><li><a href='#' onclick="alert('10')">链接 10</a></li><li><a href='#' onclick="alert('11')">链接 11</a></li><li><a href='#' onclick="alert('12')">链接 12</a></li><li><a href='#' onclick="alert('13')">链接 13</a></li><li><a href='#' onclick="alert('14')">链接 14</a></li><li><a href='#' onclick="alert('15')">链接 15</a></li><li><a href='#' onclick="alert('16')">链接 16</a></li><li><a href='#' onclick="alert('17')">链接 17</a></li><li><a href='#' onclick="alert('18')">链接 18</a></li><li><a href='#' onclick="alert('19')">链接 19</a></li><li><a href='#' onclick="alert('20')">链接 20</a></li><li><a href='#' onclick="alert('21')">链接 21</a></li><li><a href='#' ontouchstart="alert('22')">链接 22</a></li><div id="bottomDiv" class="touchDiv">触摸时触发事件 2</div>我猜这会破坏大多数移动优化的网络应用程序.
以上代码有问题吗?和/或是否有任何解决方法?
(我已经向苹果提出了一个错误 - 前段时间，没有回应)
非常感谢 Baicoianu 先生.
基本上你需要监听父滚动 div 上的触摸事件.所以在我的情况下添加:
document.getElementById("scrollbox").addEventListener('touchstart', function(event){});到 onBodyLoad 函数.
我猜这是一些事件传播问题，通过更高级别的监听解决了.
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).
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)
Looks like there is a workaround to this problem on apple dev forums
So many thanks to Mr Baicoianu.
Basically you need to listen to touch events on the parent scroll div. So in my case add:
document.getElementById("scrollbox").addEventListener('touchstart', function(event){});
to the onBodyLoad function.
I guess this is some event propagation issue, solved by listening at a higher level.
这篇关于`-webkit-overflow-scrolling: touch` 在 iOS7 中最初的屏幕外元素被破坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
