InMemoryScrollingOptions — Angular

Параметры конфигурации функции прокрутки, которую можно использовать с withInMemoryScrolling или RouterModule.forRoot.

API

interface InMemoryScrollingOptions {
  anchorScrolling?: "disabled" | "enabled" | undefined;
  scrollPositionRestoration?: "disabled" | "enabled" | "top" | undefined;
}

anchorScrolling

"disabled" | "enabled" | undefined

Если задано значение 'enabled', прокручивает страницу до элемента-якоря, когда URL содержит фрагмент. По умолчанию прокрутка к якорю отключена.

При событии 'popstate' прокрутка к якорю не выполняется. Вместо этого восстанавливается сохранённая позиция или выполняется прокрутка вверх.

scrollPositionRestoration

"disabled" | "enabled" | "top" | undefined

Настраивает восстановление позиции прокрутки при возврате назад.

'disabled' — (по умолчанию) ничего не делает. Позиция прокрутки сохраняется при навигации.
'top' — устанавливает позицию прокрутки x = 0, y = 0 при любой навигации.
'enabled' — восстанавливает предыдущую позицию прокрутки при навигации назад; в противном случае устанавливает позицию на якорь, если он указан, или задаёт позицию прокрутки [0, 0] (при навигации вперёд). В будущем этот параметр будет использоваться по умолчанию.

Вы можете реализовать собственное поведение восстановления прокрутки, адаптировав поведение параметра enabled, как показано в следующем примере.

class AppComponent {
  movieData: any;

  constructor(private router: Router, private viewportScroller: ViewportScroller,
changeDetectorRef: ChangeDetectorRef) {
  router.events.pipe(filter((event: Event): event is Scroll => event instanceof Scroll)
    ).subscribe(e => {
      fetch('http://example.com/movies.json').then(response => {
        this.movieData = response.json();
        // update the template with the data before restoring scroll
        changeDetectorRef.detectChanges();

        if (e.position) {
          viewportScroller.scrollToPosition(e.position);
        }
      });
    });
  }
}