javascript - Backbone 后退按钮滚动问题

Question

我是 Backbone 的新手，在决定保留之前一切都很顺利一长串项目和项目 View 之间的 scrollTop 位置。我设法保存列表和项目 View 的滚动位置，一切都很好，但是当按下浏览器后退按钮时，在实际返回 ListView 之前，浏览器会自动滚动回到 listView 的位置。我用谷歌搜索并没有发现任何关于这种行为的信息。有什么解决办法吗？

提前感谢您的帮助。

App.prototype.initialize = function() {
  var e, error1, fallbackLanguage, language;
  L.debug("App.initialize -> triggered.");
  try {
    Backbone.noConflict();
    _.noConflict();
    window.app = {};
    window.app.scrollYHistory = {};
    window.app.history = [];
    this.listenTo(Backbone, "translate", _translate);
    this.listenTo(Backbone, "changeLanguage", _changeLanguage);
    this.listenTo(Backbone, "setServerLanguage", _setServerLanguage);
    this.listenTo(Backbone, "userLoggedOut", _destroyJWT);
    this.listenTo(Backbone, "setJWT", _setJWT);
    this.listenTo(Backbone.history, "route", _history);
    _UASupportAnimation();
    _UASupportCookie();
    _UASupportLocalStorage();
    _UASupportTransition();
    _cssExtra();
    window.onerror = function(error) {
      return L.error(error);
    };
    new MainRouter();
    new UserRouter();
    new AdminRouter();
    fallbackLanguage = LANGUAGE_SUPPORTED[LANGUAGE_DEFAULT];
    language = _getLanguage();
    L.debug("App.initialize -> i18n module.");
    return $.i18n.init({
      "useCookie": false,
      "fallbackLng": fallbackLanguage,
      "lng": language,
      "load": "current",
      "ns": {
        "namespaces": ["translation", "validation"],
        "defaultNs": "translation"
      },
      "resGetPath": "/static/languages/__lng__/__ns__.json",
      "useDataAttrOptions": true
    }).done(function() {
      L.debug("App.initialize -> i18n initialization done, starting the application.");
      _setServerLanguage();
      Backbone.history.start({
        "root": "/",
        "pushState": true,
        "hashChange": true
      });
      return L.debug("App.initialize -> initialization completed.");
    });
  } catch (error1) {
    e = error1;
    return L.error(e);
  }
};
_history = function(router, handler, args) {
  var e, error1, lastPage;
  try {
    lastPage = window.app.history[window.app.history.length - 1];
    if (!_.isUndefined(lastPage)) {
      _saveScrollYPosition(lastPage);
    }
    return window.app.history.push(window.location.pathname);
  } catch (error1) {
    e = error1;
    return L.error(e);
  }
};

_saveScrollYPosition = function(pathname) {
  var e, error1;
  try {
    L.debug("App._saveScrollYPosition -> triggered.");
    return window.app.scrollYHistory[pathname || window.location.pathname] = document.body.scrollTop;
  } catch (error1) {
    e = error1;
    return L.error(e);
  }
};



function AdView() {
  return AdView.__super__.constructor.apply(this, arguments);
}

AdView.prototype.tagName = "section";

AdView.prototype.className = "l-page l-page--ad";

AdView.prototype.template = _.template($(Template).html());

AdView.prototype.initialize = function(model) {
  var e, error;
  this.model = model;
  if (!this.model) {
    throw new Error("adView.initialize -> can't initialize without my model!");
  }
  try {
    this.Header = HeaderView;
    this.Footer = FooterView;
    this.adModel = this.model.adModel.toJSON();
    this.scrollYPosition = window.app.scrollYHistory[window.location.pathname] || 0;
    this.compiledTemplate = this.template(this.adModel);
    return L.debug((this.getMyName()) + ".initialize -> done.");
  } catch (error) {
    e = error;
    return L.error(e);
  }
};

AdView.prototype.render = function() {
  var e, error;
  L.debug((this.getMyName()) + ".render -> triggered");
  try {
    $("main").html(this.$el.html(this.compiledTemplate));
    window.scroll(0, this.scrollYPosition);
    L.debug((this.getMyName()) + ".render -> process completed.");
    return this;
  } catch (error) {
    e = error;
    return L.error(e);
  }
};
return AdView;

Answer 1

在您的 AdView.prototype.render 方法中，您有 window.scroll(0, this.scrollYPosition);。从提供的代码中不清楚调用 AdView.prototype.render 的位置，但可能是您的路由逻辑中的某些内容在用户访问路由时调用了它。

你写道:

when pressing the browser back button there is an autoscrolling from the browser going back to the position of the listView before actually going back to the list view

当您单击触发新路由操作的浏览器后退按钮时，它会重新触发该路由逻辑。由于您的 render 逻辑涉及更改 window 的滚动位置，因此很自然地，当您单击后退按钮时，您将重新触发该 render，这将重新更改滚动位置。