interface
Configuration options for the scrolling feature which can be used with withInMemoryScrolling
function.
interface InMemoryScrollingOptions { anchorScrolling?: 'disabled' | 'enabled' scrollPositionRestoration?: 'disabled' | 'enabled' | 'top' }
Property | Description |
---|---|
anchorScrolling?: 'disabled' | 'enabled' | When set to 'enabled', scrolls to the anchor element when the URL has a fragment. Anchor scrolling is disabled by default. Anchor scrolling does not happen on 'popstate'. Instead, we restore the position that we stored or scroll to the top. |
scrollPositionRestoration?: 'disabled' | 'enabled' | 'top' | Configures if the scroll position needs to be restored when navigating back.
You can implement custom scroll restoration behavior by adapting the enabled behavior as in the following example. 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); } }); }); } } |
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/api/router/InMemoryScrollingOptions