在iphone上使用webkit-transform和相对定位时,如何修复缓慢的滚动

时间:2022-01-20 14:26:18

I have implemented scrolling of a div by using relative positioning and webkit animation for the iphone, it works beautifully on desktop safari but is choppy on the actual iphone (fine on the simulator).

我已经为iphone实现了使用相对定位和webkit动画滚动div,它在桌面safari上运行得很好,但在实际的iphone上却很不稳定(在模拟器上很好)。

The scrolling works by having a div nested and clipped (overflow:hidden) by its parent. I then set the top position and animate it with -webkit style declarations. The iphone seems to noticeably slow down when there are a lot of items in the inner div.

滚动的工作方式是让一个div嵌套并被父div裁剪(overflow:hidden)。然后我设置顶部位置并使用-webkit样式声明使其动画化。当内部div中有很多条目时,iphone的速度明显减慢。

Any ideas how make the scrolling smoother?

任何想法如何使滚动更顺畅?

This was a problem with iScroll code and my own hand coded stuff.

这是iScroll代码和我自己手工编码的问题。

1 个解决方案

#1


4  

Using translate3d is much faster than straight up translate, as it utilizes hardware acceleration.

使用translate3d比直接进行翻译要快得多,因为它利用了硬件加速。

#1


4  

Using translate3d is much faster than straight up translate, as it utilizes hardware acceleration.

使用translate3d比直接进行翻译要快得多,因为它利用了硬件加速。