在 iPad 上滚动冻结 (javascript)

Posted 2023-03-12

【中文标题】在 iPad 上滚动冻结 (javascript)

【英文标题】：Scroll freezes on iPad (javascript)

【发布时间】：2014-03-12 10:51:18

【问题描述】：

我在 javascript 上为 iPad 开发应用程序。我有一些 div。此 div 中的内容应该是可滚动的。我使用此类为 div 添加了滚动：

.scrollable 
 -webkit-overflow-scrolling: touch;
 overflow-y: scroll !important;
 -webkit-transform: translate3d(0, 0, 0);

这种方式在 90% 的情况下都有效，但有时我尝试滚动内容但没有任何反应。我等了大约 3 秒，然后再试一次 - 滚动工作。我没有任何可能导致这种行为的解决方法 javascript 代码。

为什么会出现这种行为？

【问题讨论】：

哪个版本的ios？我在 iOS5 上遇到过类似的行为。

我们需要更多的代码，比如 html。 jsfiddle.net 会很棒。

您动态或静态加载该内容。尝试将height 属性赋予您的.scrollable div。

此行为在 iOS 7.0 和 iOS 7.1 上重现。这是 jsfiddle 链接 jsfiddle.net/AnnaMiroshnichenko/373JH ，这是 jsfiddle 全屏结果链接 jsfiddle.net/AnnaMiroshnichenko/373JH/embedded/result 。我动态添加内容并设置高度。

我创建了有趣的功能。一根手指滚动和两根手指滚动产生不同的事件。 developer.apple.com/library/safari/documentation/… 如果用户使用一根手指滚动页面，我如何模仿两根手指滚动（在 javascript 端）？

【参考方案1】：

您提到您正在动态加载内容，但您的小提琴没有发生动态内容加载，所以我不能像我希望的那样用您的小提琴叉来回答。

但是，我最近遇到了一个非常相似的问题，发现如果在内容加载后（时间很关键），我将任何可滚动元素设置为使用-webkit-transform: translate3d(0,0,0);，它似乎解决了奇怪的“冻结”行为。

（在我的例子中，我的动态内容是使用 jQuery 的 $.get 速记加载的，所以我使用 .then() 运行一个函数，该函数会每次自动设置适当的 CSS 新内容已加载。）

如果这有帮助，请告诉我。