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

我想做的是在我的 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 标记。

最佳答案

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

这是我保存和恢复的代码。这段代码几乎是从我的尝试转移到我的实际解决方案，只是在不同的事件上调用它。 “软”是一个标志，它来自浏览器操作(后退、前进或散列单击)，而不是对 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"。

好吧。有用。 :-)

关于javascript - 如何处理 Backbone.js 应用程序中 hashchange 的滚动位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11216392/