【发布时间】：2011-12-07 11:40:44
【问题描述】：
当使用[-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]并在该部分时将其删除隐。效果很好，但我仍然不知道是什么导致了这个问题。
【问题讨论】：
-
嗨，你不能做什么？我在 iOS 5 模拟器上运行代码，一切似乎都是可点击和可滚动的。
-
很抱歉代码运行良好。但是，在一些复杂的情况下，例如如果使用了更多的 css 规则，它确实会导致触摸事件出现问题。顺便问一下，css :active 效果在 ios5 中不起作用吗？
-
你修好了吗？我也有同样的问题
-
我在 iOS 5 中遇到了同样的问题。我的标题 div（在滚动元素之前打开/关闭很久）有 4 个链接。当这个类被添加到页面下方的 div 中时，最左边的三个变得不可点击。另一个链接很奇怪。将设备更新到 iOS 6 解决了这个问题。我将通过在需要时仅将类动态添加到可见元素来尝试对 iOS 5 进行相同的修复。
标签： ios ios5 web-applications mobile webkit