javascript - 如何处理 Backbone.js 应用程序中 hashchange 的滚动位置？

Question

我已经通读了许多相关主题，但似乎没有一个提供解决方案。

我想做的是在我的 Backbone.js 应用程序中智能地处理滚动条。像许多其他人一样，我有多个#mypage 哈希路由。其中一些路由是分层的。例如我有一个列出一些项目的#list 页面，我单击列表中的一个项目。然后它会打开一个#view/ITEMID 页面。

我的页面在 HTML 布局中都共享相同的内容 div。在导航更改时，我将代表该路线 View 的新 div 注入(inject)到 Content div 中，替换之前的内容。

现在我的问题是:

如果该项目在列表中很靠后，我可能需要滚动才能到达那里。当我点击它时，“默认”Backbone 行为是#view/ITEMID 页面显示在与#list View 相同的滚动位置。修复它很容易；每当注入(inject)新 View 时，只需添加 $(document).scrollTop(0)。

问题是，如果我点击后退按钮，我想返回到之前滚动位置的#list View 。

我试图对此采取明显的解决方案。存储路线图以滚动内存中的位置。我在 hashchange 事件的处理程序开始时写入此映射，但在新 View 实际放入 DOM 之前。在新 View 位于 DOM 中之后，我从 hashchange 处理程序末尾的映射中读取。

我注意到，至少在 Firefox 的某个地方，某些东西正在滚动页面作为 hashchange 事件的一部分，所以当我的写入 map 代码被调用时，文档有一个不稳定的用户绝对没有明确指定的滚动位置。

有人知道如何解决这个问题，或者我应该改用的最佳做法吗？

我仔细检查了一下，发现我的 DOM 中没有与我使用的哈希匹配的 anchor 标记。

Answer 1

我对此的解决方案最终没有我想要的那样自动，但至少它是一致的。

这是我保存和恢复的代码。这段代码几乎是从我的尝试转移到我的实际解决方案，只是在不同的事件上调用它。 “软”是一个标志，它来自浏览器操作(后退、前进或散列单击)，而不是对 Router.navigate() 的“硬”调用。在 navigate() 调用期间，我只想滚动到顶部。

restoreScrollPosition: function(route, soft) {
    var pos = 0;
    if (soft) {
        if (this.routesToScrollPositions[route]) {
            pos = this.routesToScrollPositions[route];
        }
    }
    else {
        delete this.routesToScrollPositions[route];
    }
    $(window).scrollTop(pos);
},

saveScrollPosition: function(route) {
    var pos = $(window).scrollTop();
    this.routesToScrollPositions[route] = pos;
}

我还修改了 Backbone.History，以便我们可以区分对“软”历史记录更改(调用 checkUrl)作出 react 与以编程方式触发“硬”历史记录更改之间的区别。它将此标志传递给路由器回调。

_.extend(Backbone.History.prototype, {

    // react to a back/forward button, or an href click.  a "soft" route
   checkUrl: function(e) {
        var current = this.getFragment();
        if (current == this.fragment && this.iframe)
            current = this.getFragment(this.getHash(this.iframe));
        if (current == this.fragment) return false;
        if (this.iframe) this.navigate(current);
        // CHANGE: tell loadUrl this is a soft route
        this.loadUrl(undefined, true) || this.loadUrl(this.getHash(), true);
    },

    // this is called in the whether a soft route or a hard Router.navigate call
    loadUrl: function(fragmentOverride, soft) {
        var fragment = this.fragment = this.getFragment(fragmentOverride);
        var matched = _.any(this.handlers, function(handler) {
            if (handler.route.test(fragment)) {
                // CHANGE: tell Router if this was a soft route
                handler.callback(fragment, soft);
                return true;
            }
        });
        return matched;
    },
});

最初我试图在 hashchange 处理程序期间完全执行滚动保存和恢复。更具体地说，在 Router 的回调包装器中，调用实际路由处理程序的匿名函数。

route: function(route, name, callback) {
    Backbone.history || (Backbone.history = new Backbone.History);
    if (!_.isRegExp(route)) route = this._routeToRegExp(route);
    if (!callback) callback = this[name];
    Backbone.history.route(route, _.bind(function(fragment, soft) {

        // CHANGE: save scroll position of old route prior to invoking callback
        // & changing DOM
        displayManager.saveScrollPosition(foo.lastRoute);

        var args = this._extractParameters(route, fragment);
        callback && callback.apply(this, args);
        this.trigger.apply(this, ['route:' + name].concat(args));

        // CHANGE: restore scroll position of current route after DOM was changed
        // in callback
        displayManager.restoreScrollPosition(fragment, soft);
        foo.lastRoute = fragment;

        Backbone.history.trigger('route', this, name, args);
    }, this));
    return this;
},

我想以这种方式处理事情，因为它允许在所有情况下进行保存，无论是 href 单击、后退按钮、前进按钮还是 navigate() 调用。

浏览器有一个“功能”，它会尝试记住您在哈希更改上的滚动，并在返回哈希时移动到它。通常这会很棒，并且可以省去我自己实现它的所有麻烦。问题是我的应用程序和许多应用程序一样，会逐页更改 DOM 的高度。

例如，我在一个高大的#list View 上并滚动到底部，然后单击一个项目并转到一个根本没有滚动条的短#detail View 。当我按下“后退”按钮时，浏览器将尝试将我滚动到我在 #list View 中的最后位置。但是文档还没有那么高，所以它不能这样做。当我调用 #list 的路由并重新显示列表时，滚动位置丢失了。

所以，无法使用浏览器内置的滚动内存。除非我将文档设置为固定高度或做了一些我不想做的 DOM 技巧。

此外，内置滚动行为打乱了上述尝试，因为对 saveScrollPosition 的调用为时已晚——浏览器此时已经更改了滚动位置。

这个问题的解决方案应该很明显，是从 Router.navigate() 调用 saveScrollPosition 而不是路由回调包装器。这保证我在浏览器对 hashchange 做任何事情之前保存滚动位置。

route: function(route, name, callback) {
    Backbone.history || (Backbone.history = new Backbone.History);
    if (!_.isRegExp(route)) route = this._routeToRegExp(route);
    if (!callback) callback = this[name];
    Backbone.history.route(route, _.bind(function(fragment, soft) {

        // CHANGE: don't saveScrollPosition at this point, it's too late.

        var args = this._extractParameters(route, fragment);
        callback && callback.apply(this, args);
        this.trigger.apply(this, ['route:' + name].concat(args));

        // CHANGE: restore scroll position of current route after DOM was changed
        // in callback
        displayManager.restoreScrollPosition(fragment, soft);
        foo.lastRoute = fragment;

        Backbone.history.trigger('route', this, name, args);
    }, this));
    return this;
},

navigate: function(route, options) {
    // CHANGE: save scroll position prior to triggering hash change
    nationalcity.displayManager.saveScrollPosition(foo.lastRoute);
    Backbone.Router.prototype.navigate.call(this, route, options);
},

不幸的是，这也意味着如果我对保存滚动位置感兴趣，我总是必须显式调用 navigate()，而不是只在我的模板中使用 href="#myhash"。

好吧。有用。 :-)