jquery - 在 Ember 中保留滚动位置

Question

我正在尝试创建一个 Ember 应用程序，其中保留了路线之间的滚动位置，从而在浏览时为用户提供更愉快的体验。

预期结果

如果我在/pageb 上向下滚动 500px，单击指向/pagea 的链接，单击浏览器后退按钮，我应该回到 500px 滚动顶部。

实际结果

点击浏览器后退按钮时，scroll top等于/pagea的高度。

如何重现

git clone https://github.com/eTilbudsavis/ember-scroll-demo
cd ember-scroll-demo
npm install
ember serve
open http://localhost:4200/pageb

然后一直滚动到底部，单击 pagea 链接，然后单击浏览器后退按钮，您应该会看到问题。

最后的笔记

我认为此行为的原因是当我单击浏览器后退按钮时，浏览器会尝试滚动回到离开该路线之前的位置。因为 Ember 还没有渲染那个 View ，所以浏览器不能去那里。它只能向下滚动到/pagea 的高度。

现在，更棘手的是，如果我转到浏览器的控制台并在单击返回后手动设置滚动顶部，也没有任何反应。看起来浏览器认为它位于右滚动顶部，即使它不是。如果我用鼠标滚动一次，浏览器会一直跳到它应该在的位置。

我希望我已经尽可能简明地解释了这一点。否则，请随时询问更多详细信息。

谢谢!

Answer 1

您似乎试图依赖浏览器的“滚动状态”，但您没有指定您使用的是什么浏览器。

我已经尝试创建长页面并转到外部链接，当前 Chrome 在返回后保存滚动状态，但 Firefox 没有。

因此，在不依赖浏览器的情况下，“状态保存”问题的一般答案是使用 queryParams .

我创建了示例，并将滚动状态保存到 queryParams。请注意，我正在使用 replaceState防止浏览器为每次滚动创建新的历史条目。

App = Ember.Application.create({});

App.ApplicationRoute = Ember.Route.extend({
  queryParams: {
    scrollTop: {
      replace: true
    }
  },
  setupController: function(controller) {
    $(window).on('load', function() {
      $(document).scrollTop(controller.get('scrollTop'));  
    });
  }
});

App.ApplicationController = Ember.Controller.extend({
  queryParams: ["scrollTop"],
  scrollTop: 0,
  handleScroll: function() {
    this.set('scrollTop', $(document).scrollTop());
  },
  bindScrollEvent: function() {
    $(window).on('scroll', Ember.run.bind(this, this.handleScroll));
  }.on('init')
});

JSBin 是 here .

更新:我用固定版本替换了代码示例，它实际上在 Firefox 和 Chrome 中都有效。