大佬教程收集整理的这篇文章主要介绍了缓慢列表视图在iPad上滚动时在一个溢出中滚动:auto div,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
$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慢得多,我不能使用它。
所以,我尝试了很多,我更多的阅读这个问题。我结束了一个解决方案,对我来说是“OK”(因为它的工作原理),但绝对不接近“完美”。
使用此CSS时:
.container { overflow: scroll; -webkit-overflow-scrolling: touch; }
当您使用复杂的设计(在我的情况下为全屏幕背景图片)时,遇到很多问题,并且使用绝对定位的元素和iframe时,会变得更糟。 (这当然是我所需要的)。
那么,诀窍呢?基本上这个CSS:
.container > * { -webkit-transform: translate3d(0,0); }
有了这个规则,几乎所有的时间内容都没有得到这些空白区域。只有当第一次快速滚动时,它有点闪烁。
但是要小心使用规则-webkit-transform:translate3d(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 ); });
在触摸设备上滚动事件的事情是,只有当滚动已经结束时,它才被触发,所以这个功能在任何时候都没有被触发,但是当动量已经结束时。这个短暂的运动实际上是不可见的。
所以,也许这对某人有帮助。
更多信息
>关于iOS中如何触发滚动事件:
javascript scroll event for iPhone/iPad?
>这个问题的Bug报告给苹果:
http://stackoverflow.com/a/7893031/1456376
> iframe示例有同样的问题:
以上是大佬教程为你收集整理的缓慢列表视图在iPad上滚动时在一个溢出中滚动:auto div全部内容,希望文章能够帮你解决缓慢列表视图在iPad上滚动时在一个溢出中滚动:auto div所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。