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

【问题标题】：How can I scroll to a page element in jQuery Mobile?如何滚动到 jQuery Mobile 中的页面元素？
【发布时间】：2011-10-24 11:22:13
【问题描述】：

我有一个很长的 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 完全加载时页面位置会被重置。任何人都可以提出更好的方法吗？

谢谢

【问题讨论】：

您是否尝试绑定到pagecreate 事件。
是的 - 和 pageInit。没有运气：/

标签： javascript jquery jquery-mobile

【解决方案1】：

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

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

发生的情况是这与对silentScroll() 的应用调用冲突。调用得太早，框架会滚动回顶部。调用太晚，UI 闪烁。

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

例如，这里是我用于深度链接到命名元素的代码（请务必使用 data-ajax="false" 禁用入站链接上的 ajax 加载）。已知的锚名称是#unread 和#p<ID>。标头是固定的，使用#header ID。

$(document).bind('pageshow',function(e) {
    var $anchor;
    console.log("location.hash="+location.hash);
    if (location.hash == "#unread" || location.hash.substr(0,2) == "#p") {
        // Use anchor name as ID for the element to scroll to.
        $anchor = $(location.hash);
    }
    if ($anchor) {
        // Get y pos of anchor element.
        var pos = $anchor.offset().top;

        // Our header is fixed so offset pos by height.
        pos -= $('#header').outerHeight();

        // Don't use silentScroll() as it interferes with the automatic 
        // silentScroll(0) call done by JQM on page load. Instead, register
        // a one-shot 'silentscroll' handler that performs a plain
        // window.scrollTo() afterward.
        $(document).bind('silentscroll',function(e,data) {
            $(this).unbind(e);
            window.scrollTo(0, pos);
        });
    }
});

不再有 UI 闪烁，而且它似乎工作可靠。

【讨论】：

【解决方案2】：

您要查找的事件是“pageshow”。

【讨论】：

这种工作和那种不工作。我试图在页面加载时调用 $.mobile.silentScroll(1000) 。通过将其粘贴在 $("div").live("pageshow", function() {});它可以工作，但在页面加载完成后立即重置位置......有什么想法吗？
嗯.. pageshow 应该只在页面切换操作完成后触发。我想知道silentScroll是否是问题所在。试试这个：$(document).scrollTop(56);
如果还是不行，你可能需要做一个短暂的超时，比如... setTimeout(function(){$.mobile.silentScroll(1000)},100);

【解决方案3】：

我在 jQuery mobile official forum 也对这个问题进行了很多研究。

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

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

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

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

希望有人能找到比这更聪明、更有效的解决方案。

【讨论】：