Как сбросить прокрутку при изменении маршрута в 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 вместо.