当使用[-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,然后将其重新设置为触摸.但是,你必须介绍两者之间的延迟(50ms工作正常,没有尝试任何降低).所以我做的是添加了一个“scrollable”属性到元素,并使用下面的代码(使用jQuery)：
$("[scrollable]").css("-webkit-overflow-scrolling","auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling","touch") },100);
希望这可以帮助！
