Question

我是Backbone的新手，在决定保留之前一切顺利 scrollTop在一长串项目和项目视图之间的位置。我成功了保存列表和项目视图的滚动位置，一切都很好，但是当按下浏览器后退按钮时，浏览器会自动滚动回到列表视图的位置，然后再返回列表视图。我用谷歌搜索，没有发现这种行为。这有什么解决方案吗？

提前感谢您的帮助。

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被调用的代码中不清楚，但是当您的路由逻辑中的某些内容在用户访问路由时会调用它。

您写道：

按下浏览器后退按钮时会自动滚动浏览器实际返回到listView的位置回到列表视图

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

骨干后退按钮滚动问题

1 个答案: