历史上的Ember.js还原滚动，链接上的重置滚动

Question

丹尼尔·普皮乌斯将问题描述为：

很多网站都搞错了，这真的很烦人。当用户使用浏览器的“前进”或“后退”按钮导航时，滚动位置应该与上次在页面上的位置相同。这在Facebook上有时是正确的，但有时却不能。Google+似乎总是失去滚动的位置。

因此，在浏览到新页面时，已经有许多关于将滚动重新设置到页面顶部的问题。Ember.js的烹饪本也是Route.activate

export default Ember.Mixin.create({
  activate: function() {
    this._super();
    window.scrollTo(0,0);
  }
});

然而，这只解决了一半的问题。当用户使用“后退/前进”按钮时，滚动位置将不会恢复，而只是简单地重置。

解决这个问题的尝试很多，很多方法是将滚动位置存储在Ember.Controller实例中，例如在这个文章中。然而，这只是一个部分的解决办法。如果控制器多次使用，则只保留一个滚动状态。

如何保留恢复旧滚动状态的默认浏览器实现？因此，如果Route.activate是从html5历史记录状态更改触发的，则什么都不做？

Answer 1

我刚刚在我自己的应用程序中解决了这个问题。

如果您只想在需要它的地方使用它，只需使用一个混合器：

ember g mixin remember-scroll

然后在mixins/remember-scroll.js中，将其替换为：

import Ember from 'ember';

export default Ember.Mixin.create({

  scrollSelector: window,

  activate: function() {
    this._super.apply(this, arguments);
    var self = this;
    if( this.get('lastScroll') ){

      Ember.run.next(function(){
        Ember.$(self.scrollSelector).scrollTop(self.get('lastScroll'));
      });

    } else {
      Ember.$(this.scrollSelector).scrollTop(0);
    }
  },

  deactivate: function() {
    this._super.apply(this, arguments);
    this.set('lastScroll',Ember.$(this.scrollSelector).scrollTop());
  },

});

如果希望将其自动混合到所有路由中，请执行以下操作。

在Ember CLI中，创建一个新的初始化器。

ember g initializer remember-scroll

然后在initializers/remember-scroll.js中，将代码替换为：

import Ember from "ember";

var rememberScroll = Ember.Mixin.create({

  scrollSelector: window,

  activate: function() {
    this._super.apply(this, arguments);
    var self = this;
    if( this.get('lastScroll') ){

      Ember.run.next(function(){
          Ember.$(self.scrollSelector).scrollTop(self.get('lastScroll'));
      });

    } else {
      Ember.$(this.scrollSelector).scrollTop(0);
    }
  },

  deactivate: function() {
    this._super.apply(this, arguments);
    this.set('lastScroll',Ember.$(this.scrollSelector).scrollTop());
  },

});

export function initialize(/* container, application */) {
  Ember.Route.reopen(rememberScroll);
}

export default {
  name: 'remember-scroll',
  initialize: initialize
};

如果使用的是初始化程序版本，则可以删除上面的第一个混合器。

这应该会使您的所有路线记住最后一个滚动位置(如果您以前也在那里)，并在返回时应用它。

虽然我建议不要把它放在所有的路线，因为用户可能不会期望返回到以前的滚动位置，如果有大量的时间已经过去了，他们最后一次在那里。

Answer 2

我发现JeremyTM的解决方案通常是有效的。然而，在我的经验中，使用deactivate方法会导致转换时将值设置为lastScroll的不一致，而使用路由的willTransition操作方法会导致一致的集合行为。

下面是对他的混音的修改，对我来说更好：

import Ember from 'ember';

export default Ember.Mixin.create({
  activate: function() {
    this._super.apply(this, arguments);
    var self = this;

    if(this.get('lastScroll')){
      Ember.run.next(function(){
        Ember.$(window).scrollTop(self.get('lastScroll'));
      });
    } else {
      Ember.$(window).scrollTop(0);
    }
  },

  actions: {
    willTransition: function() {
      this._super.apply(this, arguments);
      this.set('lastScroll', Ember.$(window).scrollTop());
    }
  }
});

还请注意，这仍然使我觉得这是对问题的部分解决方案，因为它没有在所有链接单击时重置滚动(与浏览器导航/历史更改相反)。它是在加载路由的第一个链接单击时这样做的，但是对该路由的所有后续链接单击也将加载前一个滚动位置，从而无法识别用户在不引用其先前视图行为的情况下加载路由的预期操作(也就是使用重置滚动位置)。

Answer 3

安装这个余烬余烬-路由器-卷轴与滚动历史恢复功能重置滚动。它利用了浏览器的HistoryLocation API，因此它只是一开箱即用。