我以前一直在使用iScroll插件,但想放弃它的原生行为。
最初的实现是使用
webkit-overflow-scrolling: auto;
但是我把它更新为…
webkit-overflow-scrolling: touch
. .
在触摸卷轴上启用运动/惯性。这样做的问题是,导航栏中的列表项在滚动时完全消失,只有在势头停止时才会返回。
我在过去有过同样的问题,如果你需要使用定位元素尝试添加-webkit-transform: translateZ(0);
到元素或容器。这个属性通常迫使浏览器使用硬件加速,有了额外的功能,你的图像很可能不会消失。反正对我很管用。
这里也有更多有用的东西:http://www.html5rocks.com/en/tutorials/speed/html5/
我们追踪到具有position:relative或position:absolute的元素。当我们删除它们后,项目将在滚动时显示
就像Mark Napthine说的,添加以下css定义:
-webkit-transform: translateZ(0);
确实应该强制渲染。诀窍是将它放在溢出容器中每个未渲染的元素上。在我的例子中,它是一个无序的图像列表包含在div中带有def
-webkit-overflow-scrolling: touch;
我把上面的"transform"定义放在li标签上,它立即解决了这个问题。
这是我也遇到过的一个bug -这个问题似乎与同样的问题有关:CSS3属性webkit-overflow-scrolling:touch ERROR
user1012566建议它与滚动内元素的位置属性有关(静态工作,没有其他的),尽管我对此有不同的结果。
另一位用户说他们已经在bugreport.apple.com网站上报告了这个问题,但报告的漏洞在那里并不公开,所以我们其他人不可能看到官方的回应,如果有的话,也不可能跟踪进度。
这个bug对于iframe来说似乎更糟。我创建了一个JSFIDDLE来演示它(在iOS 5.0.1设备上打开http://jsfiddle.net/KMayN/9/),并向苹果发送了一个bug报告。非常奇怪:如果你滚动,你会看到一个空白(未渲染)的内容…但如果你缩放,内容就会出现!等等......如果他们回复我,我会让你了解最新情况。我尝试了所有的方法(可滚动的iFrame带/不带div容器,带/不带滚动的容器,等等…),都没有办法:我们必须等待苹果的错误修复。
-webkit-transform: translate3d(0, 0, 0);