当使用[-webkit-overflow-scrolling: touch;]时，滚动区域工作得很好，但它会导致触摸事件在滚动区域外停止工作。有人有同样的问题吗?谁能给我一些关于这个新滚动功能的官方链接?
<!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]，并在部分隐藏时将其删除。效果很好，但我仍然不知道是什么导致了这个问题。
我也有同样的问题，我也可以每次都复制它。我有一个页面，当iPad的方向改变时，它会调整元素的大小以适应屏幕。如果在任何时候元素不再需要滚动，它将停止这样做，即使元素被调整到需要滚动的位置(例如，对我来说，翻转回横向)。所以这绝对是一个bug，但我确实有一个解决方案:
当调整元素大小时，我将-webkit-overflow-scrolling重置为auto，然后将其设置回touch。但是，您必须在两者之间引入延迟(50ms就可以了，不要尝试更低的延迟)。因此，我所做的是为元素添加一个属性"scrollable"，并使用下面的代码(使用jQuery):
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
希望这对你有帮助!
这是由于页面上有一个<iframe>引起的。许多脚本创建<iframes>来完成他们的工作，包括社交跟踪按钮(Facebook, Twitter, G+)，分析跟踪(Google等)，以及像PhoneGap这样的库。
<iframe>如何显示并不重要。display: none; visibility: hidden; width: 0; height: 0没有修复它。如果页面上有<iframe>，则会发生这种情况，有时是间歇性的，有时是永久性的。
到目前为止，我发现的唯一解决方案(在生产应用程序中不太可行)是删除页面上的所有<iframes>，仅在需要时创建它们(例如，当我需要调用PhoneGap API时)，然后在完成时删除它们。
我确认我在一个使用大量触摸事件和列表滚动的web应用程序中看到了同样的问题。在iOS5之前，我用的是isroll，一切都很正常;在iOS5中，我使用-webkit-overflow-scrolling:touch来滚动列表，以获得更快的滚动速度。
结果是我遇到了随机出现的触摸事件，不再在应用程序的各个部分工作。这个问题通常发生在我滚动列表之后。它会随机影响滚动区域以外的元素，通常是页脚菜单。
在"冻结触摸"状态下重新加载应用程序并不能解冻它:为了解冻它，我不得不关闭safari选项卡，打开一个新的并重新加载，直到我在使用应用程序时再次遇到这个问题。
这个问题出现在iPad2, iPhone 4, iPhone 3GS，所有的iOS 5.0上
最后，我关闭了溢出触摸滚动并回到isroll，事情在iOS4中运行得很好
-webkit-overflow-scrolling + CSS3 Animations + Phonegap API调用=触摸停止响应。
我的phonegap应用程序将工作得很好，直到我调用phonegap API，此时触摸将停止响应，主要是在当前视图中有事件附加到它的第一个元素。我的应用程序的视图是body>div.current，其余的div显示none。
我每次都可以复制。
下面是一些已经列出的答案的变体。
我的具体问题是，当-webkit-overflow-scrolling: touch应用于元素时，重新定向导致滚动完全停止工作。
示例:横向方向较短，需要滚动条。纵向足够高，不需要滚动条。重新定位到景观;滚动条存在，但没有功能。
-
监听定向改变事件
-
做一些事情来触发滚动元素的布局改变
-
确保更改足够重要，渲染引擎不会优化它。例如，隐藏然后立即显示似乎没有任何作用。任何使用
setTimeout()似乎工作(也许是不同的执行上下文，我不知道)。
淡入淡出工作，或隐藏，然后显示与短延迟工作(虽然它闪烁)。@Sari的解决方案改变滚动属性工作，不会导致任何可见的重绘。
$(window).on("orientationchange", function () {
// use any valid jQuery selector
var elements = $("[data-touchfix=true]");
elements.css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () {
elements.css("-webkit-overflow-scrolling", "touch");
}, 100);
});
请注意，除了确保它不会在Chrome或IE 7/8/9中导致脚本错误外，我还没有在我的iPad 3之外测试过这个修复。
如果这是有用的…结合PhoneGap，我使用Zepto将ajax加载的、可滚动的内容附加到dom中。然后我在上面应用了css过渡。页面上没有iframe。
我遇到了与这里提到的相同的问题，滚动会停止工作。当我将生成的代码复制到一个单独的文件中并在iOS模拟器上尝试时，一切都如预期的那样工作。
我最终通过查询父容器的高度让它工作-就在css转换之前。通过添加var whatever = $('#container').height();，滚动工作。
要稍微改进ThinkingStiff的优秀答案，你可以避免眨眼—如果溢出:设置为隐藏-如果不是'auto'值，只需删除属性:
$('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''});
window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50);