W3cubDocs

/Angular

InMemoryScrollingOptions

interface

Configuration options for the scrolling feature which can be used with withInMemoryScrolling function.

interface InMemoryScrollingOptions {
  anchorScrolling?: 'disabled' | 'enabled'
  scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
}

Child interfaces

Properties

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.

  • 'disabled'- (Default) Does nothing. Scroll position is maintained on navigation.
  • 'top'- Sets the scroll position to x = 0, y = 0 on all navigation.
  • 'enabled'- Restores the previous scroll position on backward navigation, else sets the position to the anchor if one is provided, or sets the scroll position to [0, 0] (forward navigation). This option will be the default in the future.

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