Как сбросить прокрутку при изменении маршрута в Ember 3? - PullRequest
Новая
       51

Как сбросить прокрутку при изменении маршрута в Ember 3?

0 голосов
/ 05 августа 2020

Я пытаюсь использовать 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;
}

1 Ответ

0 голосов
/ 05 августа 2020

Ваш подход работает должным образом. Я создал Ember Twiddle для проверки этого, который вы можете найти здесь . Имеет два маршрута. Один, который прокручивается вверх при активации, и другой, который прокручивается вниз при активации. Он прокручивается, как и ожидалось.

Полагаю, вы можете столкнуться с проблемами при переходе между подмаршрутами? Считается, что маршрут остается активным, и ловушка активации не вызывается

  • , если переход не изменяет маршрут, а только динамические c сегменты или параметры запроса, используемые для маршрута или
  • , если переход происходит между подмаршрутами этого маршрута.

Если вы хотите, чтобы при каждом переходе выполнялась прокрутка вверх или вы хотите иметь более детальный контроль, какие переходы должны запускать эту прокрутку, я бы рекомендовал вместо этого использовать событие routeDidChange из RouterService.

...