首页 文章

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

提问于
浏览 次
21

我正在为主要的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选项卡上工作正常 . 请帮助 .

EDIT: 如果我只使用

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

然后我不会在滚动后面对这个瞬间空白区域的问题，但滚动速度非常缓慢 .

请不要建议使用iScroll . 已经尝试过了 . 我用-webkit-overflow-scrolling得到的速度要慢得多，而且我无法使用它 .

ipad ios5 jquery-mobile cordova webkit

2 回答

  • 23

    我的方法

    所以，我尝试了很多，我更多地阅读了这个问题 . 我最终得到了一个对我来说“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 ，工作正常 .

    Done? 不是真的 . 还有 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事件：

    javascript scroll event for iPhone/iPad?

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

    https://stackoverflow.com/a/7893031/1456376

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

    https://stackoverflow.com/a/8275972/1456376

    回复于
  • 1

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

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

    在iOS上，它使用硬件加速来渲染滚动 . 它非常易于使用，您只需要为div分配一个额外的类 .

    我们确实在Android 2上遇到了一些问题，为了克服这些问题，我们更改了 jquery.mobile.scrollview.js 中的 scrollMethod 属性 .

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

    回复于

相关问题