如何在 ember 3 中重置路由更改的滾動？

Question

我正在嘗試使用 hook activate、didTransition 或 willTransition，但這些都不起作用，它們什么都不做。 我嘗試從一條路線開始：

// app/routes/section.js
import Route from '@ember/routing/route';

export default class SectionRoute extends Route { 
  ...

  activate() { scroll(0, 0); }
}

<!-- app/templates/section.hbs -->
<h1>{{model.title}}</h1>
<p>{{model.body}}</p>
{{outlet}}
{{#each model.subsections as |s| }}
  <Section @section={{s}} />
{{/each}}

這適用於我的 js 瀏覽器控制台：

scroll(0, 0);

這是我的路由器

// app/router.js
...
Router.map(function() {
  this.route('docs');
  this.route('section', { path: '/docs/section/:slug' });
});

如果我將部分設為文檔的子項，則它可以工作，只要我不隱藏父項的內容，但我想隱藏它。 鏈接到組件中的錨點可能會有所幫助。

當我刪除這塊 css 時，它可以工作。

html {
  scroll-behavior: smooth;
}

Answer 1

您的方法按預期工作。 我創建了一個 Ember Twiddle 來驗證它，你可以在這里找到它。 它有兩條路線。 一個在激活時滾動到頂部，一個在激活時滾動到底部。 它按預期滾動。

我猜如果在子路由之間轉換，您可能會遇到鈎子問題？ 一條路由被認為保持活躍，並且激活鈎子沒有被調用

• 如果轉換不更改路由而僅更改用於路由的動態段或查詢參數，或者
• 如果該路由的子路由之間發生轉換。

如果您想在每個轉換上滾動到頂部或想要進行更精細的控制，哪些轉換應該觸發該滾動，我建議改用routeDidChange的RouterService事件。