logo标签列表

如何避免Safari移动版（iPad）滚动卡顿问题？

ipadhtmlcssjquery-mobilemobile-safari
12
我有一个简单的HTML5页面，里面有3个div。如果我只允许第三个div滚动，那么会出现一些可怕的卡顿和触摸反应奇怪。你有什么想法吗？
<html>
<body style="overflow:hidden">
 <div>
    BLA1
 </div>
 <div>
   BLA2
 </div>
 <div style="overflow: auto;">
    BLA3 overflow is here
 </div>
</body>
</html>
我在更新到iOS 12后遇到了类似的问题，将 position: fixed 应用于 body 就解决了我的问题。 - Grochni
2个回答
49

好的，多亏了iScroll4插件，我得到了一种适用于iPad Web开发者的新技巧。 显然，这个CSS效果更佳：

overflow-y: scroll;
overflow-x: hidden; 
-webkit-overflow-scrolling: touch;

虽然这个很卡：

overflow: auto;
2
有没有办法在使用这种方法滚动时，保持绝对或相对定位的元素不会消失一两秒钟？ - jasonmerino
@jasonmerino 这是固定 elt 滚动的已知问题。您可以在滚动后覆盖元素的 CSS。虽然我从未尝试过，但如果您找到了，请在此处评论。 - TecHunter
2
这个很好用！只是需要注意的是，我只需要使用-webkit-overflow-scrolling属性，而不需要使用overflow: auto。 - fanfavorite
@fanfavorite 是的，webkit部分是重要的，尽管明确指定允许溢出的轴总是很好的选择... - TecHunter
1
我希望我能够给这个更多的赞。你让我的一天变得美好了五倍。添加 overflow-x: hidden 和 auto 的区别真是惊人。我以为我永远都无法把这个东西搞定。非常感谢！ - harpo
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接