ng-scroll-savior v0.2.4
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