iOS5 -webkit-overflow-scrolling导致触摸事件停止工作 [英] iOS5 -webkit-overflow-scrolling causes touch events to stop working
问题描述
在使用[ -webkit-overflow-scrolling:触摸;]时，滚动区域效果很好，但是它会导致触摸事件停止滚动区域之外的工作.有没有人遇到过同样的问题?谁可以给我一些有关此新滚动功能的官方链接?
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动画结合transform来切换部分.当在所有部分的滚动区域中添加[-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 重置为 auto ，然后将其重置为 touch .但是，您必须在两者之间引入一个延迟(50ms可以正常工作，没有尝试任何更低的尝试).所以我所做的就是在元素上添加了可滚动"属性，并使用了下面的代码(使用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屋！
