滚动溢出时在 iPad 上滚动的慢速列表视图：自动 div答案

【问题标题】：slow list view scrolling on iPad when scrolling in an overflow:auto div滚动溢出时在 iPad 上滚动的慢速列表视图：自动 div
【发布时间】：2012-04-14 01:54:25
【问题描述】：

我正在为主要的操作系统平台开发一个 Phonegap 应用程序，目前正在使用 iOS 5 的 iPad 上对其进行测试。我使用的是 jquery mobile。所以对于大屏幕，我使用了 splitview jquery 移动插件。 http://asyraf9.github.com/jquery-mobile/
我放了一个

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

让页面滚动而不是像插件使用的那样使用 iscroll。现在发生了什么，当用户滚动时页面没有加载/重新绘制。我有一个包含 100 个项目的列表，我滚动浏览它们。

滚动本身并不慢，但新的列表视图行在滚动后几乎需要一整秒才能弹出视图。在此之前，它是一个空白区域。

在观察时，我可以看到列表项在滚动停止之前不会弹出视图。（动量卷轴）

这里有一个类似的问题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 得到的要慢得多，而且我无法使用它。

【问题讨论】：

我很确定 iOS 5 仍然一次绘制 1024x1024px 块，因此几乎所有屏幕外的内容在进入视口时都必须渲染。有趣的是，iOS 的问题比 Android 的问题更大（通常情况并非如此）。
那么你建议什么是给用户一个共同的滚动体验的最佳方式？或者至少是 iPad 上的可用体验？？
我没有发表评论作为答案，因为我对 iPad 的经验很少，但这是我在 Google 上找到的一篇很有前途的文章（搜索词是 html ipad pre-draw offscreen content）：kaioa.com/node/103 .
我有同样的问题，滚动很慢（只有“溢出：滚动”或者直到滚动停止才能重绘屏幕（使用“-webkit-overflow-scrolling：touch” . 它只发生在大量内容上（比如来自 YouTube 的 iFrame、透明 PNG 等。而且“-webkit-overflow-scrolling”也会破坏我的 z-indexes。:-/
Offtopic：如果没有人有解决方案，我能拿回我的“钱”吗？ :)

标签： ipad ios5 jquery-mobile cordova webkit

【解决方案1】：

我的方法

所以，我尝试了很多，并且阅读了更多关于这个问题的信息。我最终得到了一个对我来说“OK”的解决方案（因为它有效），但绝对不是“完美”的。

使用此 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 );
});

触摸设备上的滚动事件是，它仅在滚动结束时触发，因此该函数不会在任何时候触发，而是在动量结束时触发。短暂的运动实际上是不可见的。

所以，也许这对某人有帮助。

我的方法

iframe

更多信息