Question

我正在为主要的操作系统平台开发一个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慢得多，而且我无法使用它。

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 - 问题:(“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 );
});

触摸设备上滚动事件的事情是，它仅在滚动结束时触发，因此此功能在任何时候都不会被触发，但是当动量结束时。短暂的移动实际上是不可见的。

所以，也许这对某些人有用。

当在溢出中滚动时，慢速列表视图在iPad上滚动：自动div

2 个答案:

我的方法

IFRAME

更多信息