【问题标题】:Update dom while scrolling in phonegap app在 phonegap 应用中滚动时更新 dom
【发布时间】:2013-07-11 12:19:07
【问题描述】:

在一个几乎完成的 phonegap 应用程序中,我在滚动时将元素动态插入到 dom 中。为此,我使用了“touchmove”和“scroll”回调。我目前面临的问题是 dom 仅在滚动完成后更新。经过一番研究,我现在认为原因是 phonegap 在滚动完成后没有更新 dom。

你们有没有人自己遇到过这个问题,并找到了解决方案?

更新

我的测试结果是 javascript 在滚动时根本没有更新。我想知道为什么会这样,以及在滚动时执行 javascript 和更新 dom 的好方法。如果您可以在视口靠近元素时想到另一种更新元素的方法,那也很好。目前,当用户停止滚动时,一切都会更新,但如果用户不这样做,他就会遇到“空”页面空间。

请求滚动检测代码

这是我目前用来检测滚动的。

document.addEventListener("touchmove", callback, false); // This works on android, but on iOS the callback is called when scrolling stops. Usually multiple times, because they stack while scrolling and not being executed. I see the event being executed during touchmove, but when the viewport begins moving, the callbacks pause until after the scrolling ends.
document.addEventListener("scroll", callback, false); // This is only executed once, and only when scrolling has fully stopped; the viewport is not moving anymore. On android this is executed all the time during scrolling, which is good.

仅在 touchmove 期间更新和滚动停止时的另一次更新的组合就足够了。用户滚动得如此之快(在触摸移动之后)以至于遇到空白空间的机会非常小。问题是在滚动过程中没有执行touchmove事件回调。

【问题讨论】:

  • 现在我很确定情况就是这样。甚至我的 console.logs 也只在滚动停止后显示。
  • 你用什么来检测滚动?你能告诉我们你的代码吗?
  • 坐在这里遇到同样的问题,你解决了吗?
  • 对不起,在我解决这个问题之前,别人接手了这个项目,所以我不知道最后是如何解决的。

标签: ios dom cordova scroll


【解决方案1】:

我建议您查看iScroll,它可以让您更好地控制用户滚动。

它可以在用户滚动到某个点时注册,然后您可以执行一个函数来加载更多的 DOM 元素,然后立即刷新滚动以继续使用更新的元素的用户体验。

【讨论】:

  • 谢谢,我试试这个。
  • 奖励代表,因为这是唯一的答案,它可能是一个解决方案,虽然我还没有尝试过。
猜你喜欢
  • 2017-10-04
  • 2015-11-23
  • 1970-01-01
  • 2012-03-16
  • 1970-01-01
  • 2015-02-18
  • 1970-01-01
  • 2011-07-30
  • 1970-01-01
相关资源
最近更新 更多