iScroll scrollToElement 不适用于 jQuery Mobile答案

【问题标题】：iScroll scrollToElement not working with jQuery MobileiScroll scrollToElement 不适用于 jQuery Mobile
【发布时间】：2012-12-21 02:07:57
【问题描述】：

我有类似这个 iScroll 例子的东西：http://cubiq.org/dropbox/iscroll4/examples/simple/

除了我使用的是 jQuery Mobile（即，页眉、页脚和内容是使用 jQuery Mobile 设置的）。除了scrollToElement，一切都运行顺利。

在使用 jQuery Mobile 和 iScroll 时，有什么方法可以让 scrollToElement 正常工作？

这是我目前拥有的 iScroll 脚本：

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper');
 }
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200);}, false);

编辑：忘了提及我想要实现的目标。在上面提到的 iScroll 示例中，我试图滚动到特定行。唯一的问题是 jQuery Mobile 出于某种原因阻止了 scrollToElement 的工作。

【问题讨论】：

标签： jquery-mobile iscroll

【解决方案1】：

还要确保您使用的是超时

         setTimeout(function () {
            myScroll.scrollToElement(".elementClass", "0s");
            myScroll.refresh();
        }, 0);

【讨论】：

【解决方案2】：

我发现的解决方法是捕获元素位置，然后使用scrollToPage()：

var w = $("#showselectedauthors").offset().top;
// ...
$.storeScroller.scrollToPage(0, w);

当然，要让它工作，你必须在元素可见时捕获位置，否则偏移量将毫无意义。您可以在页面构建时但在滚动条初始化之前执行此操作。

在我的情况下，元素是可见的，我当时捕获了w。然后我刷新一些内容并刷新滚动条。完成此操作后，我想确保该元素仍然可见。

【讨论】：

【解决方案3】：

如果有人需要滚动到 jQuery 对象，这是我的代码。确保您在 setTimeout 内调用此方法并且定义了“iscroll”对象。

function scrollToElement($element) {
    if ($element.size() > 1) {
        throw new Error("Cannot be a node!");
    };
    var offset = $element.offset().top;
    var to = -(offset - iscroll.y);
    to = (iscroll.maxScrollY > to) ? iscroll.maxScrollY : to;
    iscroll.scrollTo(0, to);
}

【讨论】：