Question

我有一个很长的jQuery移动页面，并希望在页面加载后滚动到该页面的中间位置。

到目前为止，我已经尝试了一些事情，最成功的是：

jQuery(document).bind("mobileinit", function() {
  var target;
  // if there's an element with id 'current_user'
  if ($("#current_user").length > 0) {
    // find this element's offset position
    target = $("#current_user").get(0).offsetTop;
    // scroll the page to that position
    return $.mobile.silentScroll(target);
  }
});

这可以工作但是当DOM完全加载时页面位置被重置。任何人都可以提出更好的方法吗？

由于

Answer 1

有点晚了，但我认为我有一个可靠的解决方案而不需要setTimeout()。在快速查看代码之后，似乎JQM 1.2.0在silentScroll(0)上为iOS上的chromeless视口发出window.load。见jquery.mobile-1.2.0.js，第9145行：

    // window load event
    // hide iOS browser chrome on load
    $window.load( $.mobile.silentScroll );

这会与silentScroll()的应用调用冲突。被称为太早，框架滚动回顶部。被叫太晚了，用户界面闪烁。

解决方案是将一次性处理程序绑定到直接调用'silentscroll'的{{1}}事件（window.scrollTo()仅仅是异步silentScroll()）。这样，我们捕获第一个JQM发布的window.scrollTo()并立即滚动到我们的位置。

例如，以下是我用于深度链接到命名元素的代码（确保在silentScroll(0)的入站链接上禁用ajax加载）。已知的锚名称为data-ajax="false"和#unread。标头已修复并使用#p<ID> ID。

#header

没有更多UI闪烁，它似乎可靠地工作。

Answer 2

您正在寻找的事件是“pageshow”。

Answer 3

我在jQuery mobile official forum也在挖掘这个问题。

目前似乎没有解决方案（至少对我而言）。

我按照上面的建议尝试了不同的事件（mobileinit，pageshow）和不同的功能（silentscroll，scrolltop），但是，因此，当页面滚动到顶部时，我总是滚动页面直到所有图像和html都完成加载再次！

部分且不是真正有效的解决方案是使用sgliser's answer评论中建议的计时器;不幸的是，超时很难知道何时页面将被完全加载并且如果滚动发生之前那么它将在加载结束时滚动回顶部，而如果它发生太久了页面已满载，用户已经手动滚动页面，进一步自动滚动会造成混乱。

此外，使用silentscroll或其他函数来解决特定的id或类而不是普通像素会很有用，因为使用不同的浏览器，分辨率和设备可能会给滚动提供不同且不正确的位置。

希望有人能找到比这更智能，更有效的解决方案。

如何滚动到jQuery Mobile中的页面元素？

3 个答案: