在Ember中保留滾動位置

Question

我正在嘗試創建一個Ember應用程序，其中路徑之間的滾動位置被保留，爲用戶提供瀏覽時更愉快的體驗。

預期結果

如果我滾動500像素下來/網頁B，點擊一個鏈接到/網頁A，點擊瀏覽器的後退按鈕，我應該回到了500px的滾動頂部。

實際結果

當點擊瀏覽器的後退按鈕，滾動頂部等於/網頁A的高度。

如何重現

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

然後你一路滾動到底部，點擊網頁A鏈接，然後點擊瀏覽器的後退按鈕，你應該看到這個問題。

最後說明

我認爲這種現象的原因是，當我點擊瀏覽器的後退按鈕，瀏覽器試圖回到它離開這條道路之前所具有的位置滾動。由於Ember尚未呈現該視圖，因此瀏覽器無法前往此處。它只能滾動到/ pagea的高度。

現在更棘手的是，如果我在瀏覽器的控制檯上點擊後手動設置滾動條頂部，也沒有任何反應。看起來瀏覽器認爲它是在正確的滾動頂部，即使它不是。如果我用鼠標單個滾動，瀏覽器會一直跳到它應該在的位置。

我希望我已經儘可能簡潔地解釋了這一點。否則，請隨時詢問更多細節。

謝謝！

Answer 1

如果有人想使用它，我已經解決了問題，自己與這條路線的mixin：

`import Ember from 'ember'` 

Ember.$(window).on 'unload', -> 
    $(@).scrollTop 0 

    return 

PreserveScrollMixin = Ember.Mixin.create 
    # @property [Integer] the time to wait before running the scroll callback 
    # 
    scrollingTimeout: 100 

    # As soon as the route initializes, set the min height on the body and the scroll top on the window and listen to 
    # future scroll events. 
    # 
    beforeModel: -> 
     height = @getWithDefault 'controller.height', 0 
     scrollTop = @getWithDefault 'controller.scrollTop', 0 
     onScroll = => 
      Ember.run.debounce @, @runScrolled, @scrollingTimeout 

      return 

     Ember.$('body').css 'min-height', height 
     Ember.$(window).on 'scroll.scrollable', onScroll 
     Ember.$(window).scrollTop scrollTop 

     return 

    # When the route's model is ready, set the scroll top again to be sure. 
    # 
    afterModel: -> 
     scrollTop = @getWithDefault 'controller.scrollTop', 0 

     Ember.run.next @, -> 
      Ember.$(window).scrollTop scrollTop 

      return 

     return 

    # Sets the scroll top for the window. 
    # 
    runScrolled: -> 
     @set 'controller.scrollTop', Ember.$(window).scrollTop() 

     return 

    actions: 
     # When the route appears, allow the body to flow naturally. 
     # 
     didTransition: -> 
      Ember.$('body').css 'min-height', '100%' 

      return 

     # When the route is about to leave, stop listening to scroll events and set the current body height. 
     # 
     willTransition: -> 
      Ember.$(window).off 'scroll.scrollable' 
      @set 'controller.height', Ember.$('body').height() 

      return 

`export default PreserveScrollMixin` 

Answer 2

你似乎試圖依賴瀏覽器的滾動狀態，但你沒有指定你使用的瀏覽器。

我試過創建長頁面並轉到外部鏈接，當前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。