ipad - 在溢出中滚动时在iPad上滚动的慢速 ListView :auto div

Question

我正在为主要的OS平台开发Phonegap应用程序，目前正在使用iOS 5的iPad上对其进行测试。因此，对于大屏幕，我使用了splitview jquery移动插件。 http://asyraf9.github.com/jquery-mobile/
我已经放了

$scrollArea.css('overflow-y','auto');        
$scrollArea.css('-webkit-overflow-scrolling','touch');

使页面滚动而不是像插件一样使用iscroll。现在发生了什么事，就是页面没有在用户滚动时加载/重新绘制。我有一个100件物品的 list ，我滚动它们。滚动本身并不慢，但是在滚动之后，新列表 View 行要 pop 几乎需要一整秒的时间。在此之前是空白区域。

通过观察，我可以看到列表项直到滚动停止后才 pop 。 (动量滚动)

类似的问题在这里 http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div

我该怎么做才能正常工作？相同的东西在android选项卡上也可以正常工作。请帮助。

编辑:如果我仅使用

 $scrollArea.css('overflow-y','auto');        

那么在滚动之后我就不会遇到这个暂时的空白区域的问题，但是滚动却非常缓慢。

请不要建议使用iScroll。已经尝试过了。它比-webkit-overflow-scrolling慢得多，我无法使用它。

Answer 1

我的方法
因此，我尝试了很多，并且阅读了更多有关此问题的信息。我最终得到了对我来说“确定”的解决方案(因为它可以工作)，但是绝对不是“完美”的解决方案。
使用此CSS时:

.container {
    overflow:                   scroll;
    -webkit-overflow-scrolling: touch;
}

设计复杂(在我的情况下是全屏背景图片)时，会遇到很多问题，而使用绝对定位的元素和 iframes时，情况甚至更糟。 (当然，这是我需要的两种情况)。
那么，把戏是什么呢？基本上这个CSS:

.container > * {
    -webkit-transform:          translate3d(0,0,0);
}

使用此规则，几乎始终可以立即渲染内容，而不会出现那些空白区域。仅当第一次快速向下滚动时，才有一点闪烁。
但请注意 -webkit-transform: translate3d(0,0,0);规则。在许多子元素上大量使用此规则会迫使Safari:有时会变慢，但几乎总是崩溃。最好的办法是将所有内容元素包装到一个 div中，效果很好。
完成了吗？ 不是。仍然存在 iframe -issue :(“argh”)
iframe
当开始时 iframe并不完全位于容器的可见部分时，它会被裁剪甚至根本不显示。滚动时有时也会发生这种情况。因此，我尝试强制Safari在滚动完成时重新渲染此部分，并提出了以下建议:

//using jQuery
var container   = $('#container');
var iframe  = $('#iframe');
container.scroll( function (event) {
    iframe.css( 'marginLeft', 1 );
    setTimeout( function() {
        iframe.css ( 'marginLeft', 0 );
    }, 1 );
});

触摸设备上发生滚动事件的原因是，滚动事件仅在滚动结束时才触发，因此该功能不会在任何时候触发，而是在动量结束时才触发。短暂的移动实际上是不可见的。
因此，这可能对某人有用。
更多的信息
以下是有关此问题的更多链接:

关于如何在iOS中触发滚动事件:
javascript scroll event for iPhone/iPad?

向苹果报告此问题的错误:
https://stackoverflow.com/a/7893031/1456376

带有相同问题的

iframe示例:
https://stackoverflow.com/a/8275972/1456376