Ng Scroll Savior 👼

Save your scroll position in Angular 4+ though all back/forward state transitions, and force scroll to top otherwise (like a normal website).

Install

npm i ng-scroll-savior --save

app.module.ts

@NgModule({
  ...
  imports: [
    ScrollSaviorModule.forRoot()
  ]
  ...
});

in your app.component.ts

  constructor(private router: Router,
              private scrollSaviorService: ScrollSaviorService) {
    // pass in the router and optional defaults as the second parameter if needed
    scrollSaviorService.init(router);
  }

Scroll Savior will now save your scroll positions when travelling between all pages, lazy-routes, and different templates, and restore them as necessary.

Optional Config

Default

{
  noScrollTag: 'noScroll=true',
  containerSelector: '.mat-sidenav-content' // (fallback to `window` (universal safe)
};

Usage

    ScrollSaviorModule.forRoot({
        noScrollTag: ...
        containerSelector: ...
    })

Description

| Property | Default | Description | | ------------- |:-------------:| -----:| | noScrollTag | 'noScroll=true' | string that can be appended to the end of a route to disable scroll-saving for that route. ez: https://example.com/something/else?noScroll=true | | containerSelector | '.mat-sidenav-content' (fallback to window`) | The container that is used to check scroll positioning |

Every scroll position, every page

Scroll Savior saves each route's scroll position in a HashMap and properly retrieves that position when using either a back/forward button or long-pressing the back/forward button and choosing a route from the browser list.

Performance optimized

Scroll savior never adds an observer to your scroll wheel, simply catches the scroll position on a RouteChangeStart event and uses that to determine future positioning

Lazy routes? No problem

Scroll savior works on lazy loaded routes, or routes using different templates

Universal supported

Safe for use in Angular Universal. Checks to see if the platform is the browser before accessing the window object.

Notes

This doesn't work on Ajax-loaded content

Todo

• Integration testing
• Possibly remove forRoot or allow multiple to be instantiated due to the possibility of wanting multiple containers

Thanks ~ ❤ Augie Gardner