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

Question

我正在为主要的os平台开发一个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

我的方法

所以,我尝试了很多,我更多地阅读了这个问题.我最终得到了一个对我来说"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 );
});

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

所以,这可能对某人有帮助.

更多的信息

这里有一些关于这个问题的链接:

• 关于如何在iOS中触发scroll事件:

  适用于iPhone/iPad的javascript滚动活动？

• 向Apple提出此问题的错误报告:

  /sf/answers/552512201/

• iframe 具有相同问题的示例:

  /sf/answers/579318071/

Answer 2

我们在项目中使用了下面的插件，您尝试过这个吗？

https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview

在 iOS 上，它使用硬件加速来渲染滚动。它相当容易使用，您所要做的就是为您的 div 分配一个额外的类。

我们在 Android 2 上使用此插件确实遇到了一些问题，为了克服这些问题，我们更改scrollMethod了jquery.mobile.scrollview.js.

我希望它能帮助您解决滚动问题