Question

使用[ -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]并在部分为时将其删除隐。这很好但我仍然不知道是什么原因导致这个问题。

Answer 1

我有同样的问题，我也可以每次复制它。当iPad的方向发生变化时，我有一个页面可以调整元素的大小以适应屏幕。如果在任何时候该元素不再需要滚动，那么它将在此后停止这样做，即使该元素被调整回其需要滚动的位置（例如，为我翻转回景观）。所以这肯定是一个错误，但我确实有一个解决方法：

调整元素大小时，我正在将-webkit-overflow-scrolling重置为auto，然后将其重置为touch。但是，你必须在两者之间引入延迟（50ms工作正常，没有尝试任何更低）。所以我所做的是向元素添加了“scrollable”属性，并使用下面的代码（使用jQuery）：

$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);

希望这有帮助！

Answer 2

这是因为页面上有<iframe>。许多脚本创建<iframes>来完成他们的工作，包括社交跟踪按钮（Facebook，Twitter，G +），分析跟踪（谷歌等）以及像PhoneGap这样的库。

<iframe>的显示方式无关紧要。 display: none; visibility: hidden; width: 0; height: 0无法解决此问题。如果页面上有<iframe>，则会发生，有时是间歇性的，有时甚至是。

我到目前为止找到的唯一解决方案（在生产应用中效果不佳）是删除页面上的所有<iframes>，仅在需要时创建它们（例如，我需要调用PhoneGap API），然后在完成后删除它们。

Answer 3

我确认我在使用大量触摸事件和列表滚动的Web应用程序上看到了同样的问题。在iOS5之前我使用的是iScroll，一切正常; 在iOS5中，我使用了-webkit-overflow-scrolling：touch来滚动列表以获得更快的滚动。

结果是我遇到了随机出现的触摸事件，不再适用于应用程序的各个部分。在滚动列表后，通常会出现问题。它会随机影响滚动区域外的元素，通常是页脚菜单。

当处于“冻结触摸”状态时重新加载应用程序并不解冻它：要解冻它，我必须关闭safari选项卡，打开一个新的并重新加载，直到我在使用应用程序时再次遇到问题。< / p>

问题出现在iOS2上的iPad2，iPhone 4，iPhone 3GS上

最终，我停用了溢出的触摸滚动并返回到iScroll，并且在iOS4中运行良好。

Answer 4

以下是已列出的一些答案的变体。

我的具体问题是，当-webkit-overflow-scrolling: touch应用于元素时，重定向导致滚动完全停止工作。

示例：横向方向较短，需要滚动条。肖像很高，不需要滚动条。重新定向景观;滚动条存在但无功能。

收听orientationchange事件
执行某些操作，触发滚动元素上的布局更改
确保更改足够重要，以便呈现引擎不会对其进行优化。例如，隐藏然后立即显示似乎没有做任何事情。任何使用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之外测试此修复程序。

Answer 5

-webkit-overflow-scrolling + CSS3 Animations + Phonegap API calls = touch停止响应。

我的phonegap应用程序将正常工作，直到我调用Phonegap API，此时触摸将主要停止响应主要是在当前视图中附加了事件的第一个元素。我的应用的视图是正文＆gt; div.current与其余的div显示无。

我每次都可以复制这个。

这显然是iOS5中的一个错误。

Answer 6

如果这有任何用处......合并PhoneGap我使用Zepto将ajax加载的可滚动内容附加到dom中。然后我在它上面应用了css过渡。页面上没有iFrame。

我遇到了与此处提到的相同的问题，滚动将停止工作。当我将生成的代码复制到一个单独的文件中并在iOS模拟器上尝试时 - 一切都按预期工作。

我最终通过查询父容器的高度来实现它 - 就在css转换之前。通过添加var whatever = $('#container').height();滚动工作。

Answer 7

为了改善一点ThinkingStiff的优秀答案，你可以避免眨眼 - 如果溢出：隐藏设置 - 如果不是'auto'值，只需删除属性：

$('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''});
window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50);

iOS5 -webkit-overflow-scrolling导致触摸事件停止工作

7 个答案: