iOS5 -webkit-overflow-scrolling导致触摸事件停止工作 [英] iOS5 -webkit-overflow-scrolling causes touch events stopping work
问题描述
使用[ -webkit-overflow-scrolling：touch ;]时，滚动区域运行良好，
但是它会导致触摸事件停止滚动区域的工作。
有没有人有同样的问题？谁可以给我一些关于这个新滚动功能的官方链接？
when using [-webkit-overflow-scrolling: touch;], the scrolling area does work well, but it causes touch events stopping work out of the scrolling area. Is there anyone had the same problem? Who can give me some official links about this new scrolling feature?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ios5 scroll</title>
<style type="text/css">
header {
background: red;
width: 300px;
height:44px;
}
.scroll {
width: 300px;
height:300px;
background: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="container">
<header>
<button onclick="alert('header');">won't work?</button>
</header>
<div class="scroll">
<button onclick="alert('scroll');">It works</button>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
</div>
</div>
</body>
</html>
2011-12-27：我已经解决了这个问题，但我仍然不知道真正的原因。
在我的例子中，我在一个网页中有几个部分，每个部分都有一个滚动区域和一个标题，每次只显示一个部分并使用css3动画结合转换切换部分。当在所有部分的滚动区域中添加[-webkit-overflow-scrolling]时，触摸事件会随机停止工作，所以我只是在当前显示的部分中添加[-webkit-overflow-scrolling]并在部分为时删除它隐。这很好但我仍然不知道是什么原因导致这个问题。
2011-12-27: I have fixed this problem but I still no wonder the real reason. In my case, I have several sections in one web page, each section has a scroll area and a header, each time only one section is showed and use css3 animation combined with transform to switch sections. when add [-webkit-overflow-scrolling] in the scroll area of all sections, touch events stop working randomly, so I just add [-webkit-overflow-scrolling] in the section which is showed currently and remove it when the section is hidden. That works well but I still don't know what causes this problem.
推荐答案
我有同样的问题，我也可以每次复制它。当iPad的方向发生变化时，我有一个页面可以调整元素的大小以适应屏幕。如果在任何时候该元素不再需要滚动，那么即使该元素被调整回其需要滚动的位置（例如，为我翻转回景观），它将在此后停止这样做。所以它肯定是一个错误，但我确实有一个解决方法：
I have the same issue, and I can also replicate it every time. I have a page that resizes elements to fit the screen when the orientation of the iPad changes. If at any point the element no longer needs to scroll, it will stop doing so thereafter even if the element is resized back to where it needs to scroll (e.g. flipping back to landscape for me). So it's definitely a bug, but I do have a workaround:
当调整元素大小时，我正在重置 -webkit-overflow-scrolling 到自动，然后将其设置回触摸。但是，你必须在两者之间引入延迟（50ms工作正常，没有尝试任何更低）。所以我所做的是向元素添加了scrollable属性，并使用下面的代码（使用jQuery）：
When resizing the element, I'm resetting the -webkit-overflow-scrolling to auto, then setting it back to touch. However, you have to introduce a delay between the two (50ms is working fine, didn't try any lower). So what I did was added an attribute of "scrollable" to the elements, and used the code below (using jQuery):
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
希望这有帮助！
这篇关于iOS5 -webkit-overflow-scrolling导致触摸事件停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
