Restoring And Resetting The Scroll Position Using The NavigationStart Event In Angular 7.0.4

// I bind to the scroll event and keep track of any elements that are scrolled in the
// rendered document.
private setupScrollBinding() : void {

	// Add scroll-binding outside of the Angular Zone so it doesn't trigger any
	// additional change-detection digests.
	this.zone.runOutsideAngular(
		() : void => {

			// When navigating, the browser emits some scroll events as the DOM
			// (Document Object Model) changes shape in a way that forces the various
			// scroll offsets to change. Since these scroll events are not indicative
			// of a user's actual scrolling intent, we're going to ignore them. This
			// needs to be done on both sides of the navigation event (for reasons
			// that are not fully obvious or logical -- basically, the window's
			// scroll changes at a time that is not easy to tap into). Ignoring these
			// scroll events is important because the polyfilly stops trying to
			// reinstate a scroll-offset if it sees that the given element has
			// already been scrolled during the current rendering.
			var scrollBufferWindow = 100;
			var target: Target | null;

			window.addEventListener(
				"scroll",
				( event: Event ) : void => {

					// If the scroll event happens immediately following a
					// navigation event, then ignore it - it is likely a scroll that
					// was forced by the browser's native behavior.
					if ( ( Date.now() - this.lastNavigationStartAt ) < scrollBufferWindow ) {

						return;

					}

					// The target will return NULL for elements that have irrelevant
					// scroll behaviors (like textarea inputs). As such, we have to
					// check to see if the domUtils returned anything.
					if ( target = this.domUtils.getTargetFromScrollEvent( event ) ) {

						this.scrolledElements.add( target );

					}

				},
				// We have to use the CAPTURING phase. Scroll events DO NOT BUBBLE.
				// As such, if we want to listen for all scroll events in the
				// document, we have to use the capturing phase (as the event travels
				// down through the DOM tree).
				true
			);

		}
	);

}

// I bind to the router events and perform to primary actions:
// --
// NAVIGATION START: When the user is about to navigate away from the current view,
// I inspect the current DOM state and commit any scrolled-element offsets to the
// in-memory cache of the page state (scroll events were recorded during the lifetime
// of the current router state).
// --
// NAVIGATION END: When the user completes a navigation to a new view, I check to see
// if the new view is really the restoration of a previously cached page state; and,
// if so, I try to reinstate the old scrolled-element offsets in the rendered DOM.
private setupRouterBinding() : void {

	// We need to keep track of these values across the Start / End events.
	var navigationID: number;
	var restoredNavigationID: number | null;

	// The goal of the NavigationStart event is to take changes that have been made
	// to the current DOM and store them in the render-state tree so they can be
	// reinstated at a future date.
	var handleNavigationStart = ( event: NavigationStart ) : void => {

		this.lastNavigationStartAt = Date.now();

		// Get the navigation ID and the restored navigation ID for use in the
		// NavigationEnd event handler.
		navigationID = event.id;
		restoredNavigationID = ( event.restoredState )
			? event.restoredState.navigationId
			: null
		;

		// If the user is navigating away from the current view, kill any timers that
		// may be trying to reinstate a page-state.
		clearTimeout( this.applyStateToDomTimer );

		// Before we navigate away from the current page state, let's commit any
		// scroll-elements to the current page state.
		Object.assign(
			this.currentPageState,
			this.getPageStateFromNodes( this.scrolledElements )
		);

		this.scrolledElements.clear();

		// For sake of the demo.
		console.group( "Recorded scroll offsets" );
		for ( var selector in this.currentPageState ) {

			console.log( selector, ":", this.currentPageState[ selector ] );

		}
		console.groupEnd();

	};

	// The primary goal of the NavigationEnd event is to reinstate a cached page
	// state in the event that the navigation is restoring a previously rendered page
	// as the result of a popstate event (ex, the user hit the Back or Forward
	// buttons).
	var handleNavigationEnd = () : void => {

		var previousPageState = this.currentPageState;

		// Now that we know the navigation was successful, let's start and store a
		// new page state to track future scrolling.
		this.currentPageState = this.pageStates[ navigationID ] = Object.create( null );

		// While we are going to track elements that will be scrolled during the
		// current page rendering, it is possible that there are elements that were
		// scrolled during a prior page rendering that still exist on the page, but
		// were not scrolled recently (such as a secondary router-outlet). As such,
		// let's look at the previous page state and "pull forward" any state that
		// still pertains to the current page.
		if ( ! restoredNavigationID ) {

			for ( var selector in previousPageState ) {

				var target = this.domUtils.select( selector );

				// Only pull the selector forward if it corresponds to an element
				// that still exists in the rendered page.
				if ( ! target ) {

					continue;

				}

				// Only pull the selector forward if the target is still at the same
				// offset after the navigation has taken place. In other words, if
				// the offset has somehow changed in between the NavigationStart and
				// NavigationEnd events, then ignore it. To be honest, this really
				// only applies to the WINDOW, which can change in offset due to the
				// change in what the Router is actively rendering in the DOM.
				if ( this.domUtils.getScrollTop( target ) !== previousPageState[ selector ] ) {

					continue;

				}

				this.currentPageState[ selector ] = previousPageState[ selector ];

				// For sake of the demo.
				console.group( "Pulling Scroll Offset Forward from Previous State" );
				console.log( "selector:", selector );
				console.log( "offset:", this.currentPageState[ selector ] );
				console.groupEnd();

			}

		// If we're restoring a previous page state AND we have that previous page
		// state cached in-memory, let's copy the previous state and then restore the
		// offsets in the DOM.
		} else if ( restoredNavigationID && this.pageStates[ restoredNavigationID ] ) {

			// NOTE: We're copying the offsets from the restored state into the
			// current state instead of just swapping the references because these
			// navigations are different in the Router history. Since each navigation
			// - imperative or popstate - gets a unique ID, we never truly "go back"
			// in history; the Router only "goes forward", with the notion that we're
			// recreating a previous state sometimes.
			this.applyPageStateToDom(
				Object.assign(
					this.currentPageState,
					this.pageStates[ restoredNavigationID ]
				)
			);

		}

		// Keep track of the navigation event so we can limit the size of our
		// in-memory page state cache.
		this.navigationIDs.push( navigationID );

		// Trim the oldest page states as we go so that the in-memory cache doesn't
		// grow, unbounded.
		while ( this.navigationIDs.length > 20 ) {

			delete( this.pageStates[ this.navigationIDs.shift() as number ] );

		}

	};

	// Filter navigation event streams to the appropriate event handlers.
	this.router.events.subscribe(
		( event: NavigationEvent ) : void => {

			if ( event instanceof NavigationStart ) {

				handleNavigationStart( event );

			} else if ( event instanceof NavigationEnd ) {

				handleNavigationEnd();

			}

		}
	);

}

// I attempt to apply the given page-state to the rendered DOM. I will continue to
// poll the document until all states have been reinstated; or, until the poll
// duration has been exceeded; or, until a subsequent navigation takes place.
private applyPageStateToDom( pageState: PageState ) : void {

	// For sake of the demo.
	console.group( "Attempting to Reapply Page State In PopState Navigation" );
	console.log( JSON.stringify( pageState, null, 4 ) );
	console.groupEnd();

	if ( this.objectIsEmpty( pageState ) ) {

		return;

	}

	// Let's create a copy of the page state so that we can safely delete keys from
	// it as we successfully apply them to the rendered DOM.
	var pendingPageState = { ...pageState };

	// Setup the scroll retention timer outside of the Angular Zone so that it
	// doesn't trigger any additional change-detection digests.
	this.zone.runOutsideAngular(
		() : void => {

			var startedAt = Date.now();

			this.applyStateToDomTimer = window.setInterval(
				() => {

					for ( var selector in pendingPageState ) {

						var target = this.domUtils.select( selector );

						// If the target element doesn't exist in the DOM yet, it
						// could be an indication of asynchronous loading and
						// rendering. Move onto the next selector while we still
						// have time.
						if ( ! target ) {

							continue;

						}

						// If the element in question has been scrolled (by the user)
						// while we're attempting to reinstate the previous scroll
						// offsets, then ignore this state - the user's action should
						// take precedence.
						if ( this.scrolledElements.has( target ) ) {

							delete( pendingPageState[ selector ] );

						// Otherwise, let's try to restore the scroll for the target.
						} else {

							var scrollTop = pendingPageState[ selector ];
							var resultantScrollTop = this.domUtils.scrollTo( target, scrollTop );

							// If the attempt to restore the element to its previous
							// offset resulted in a match, then stop tracking this
							// element. Otherwise, we'll continue to try and scroll
							// it in the subsequent tick.
							// --
							// NOTE: We continue to try and update it because the
							// target element may exist in the DOM but also be
							// loading asynchronous data that is required for the
							// previous scroll offset.
							if ( resultantScrollTop === scrollTop ) {

								delete( pendingPageState[ selector ] );

							}

						}

					}

					// If there are no more elements to scroll or, we've exceeded our
					// poll duration, then stop watching the DOM.
					if (
						this.objectIsEmpty( pendingPageState ) ||
						( ( Date.now() - startedAt ) >= this.pollDuration )
						) {

						clearTimeout( this.applyStateToDomTimer );

						// For sake of the demo.
						if ( this.objectIsEmpty( pendingPageState ) ) {

							console.log( "Successfully reapplied scroll offsets to DOM." );

						}

					}

				},
				this.pollCadence
			);

		}
	);

}

// Import the core angular services.
import { Directive } from "@angular/core";
import { ElementRef } from "@angular/core";
import { Event as NavigationEvent } from "@angular/router";
import { NavigationEnd } from "@angular/router";
import { Router } from "@angular/router";
import { RouterOutlet } from "@angular/router";
import { Subscription } from "rxjs";

// Import the application components and services.
import { DomUtils } from "./dom-utils";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

// I co-opt the <router-outlet> element selector so that I can tap into the life-cycle
// of the core RouterOutlet directive.
// --
// REASON: When the user clicks on a link, it's quite hard to differentiate between a
// primary navigation, which should probably scroll the user back to the top of the
// viewport; and, something like a tabbed-navigation, which should probably keep the
// user's scroll around the offset associated with the tab. As such, we are going to
// rely on the inherent scroll-position of the view as the router-outlet target is
// pulled out of the DOM.
@Directive({
	selector: "router-outlet"
})
export class RouterOutletDirective {

	private activateEventsSubscription: Subscription | null;
	private deactivateEventsSubscription: Subscription | null;
	private domUtils: DomUtils;
	private elementRef: ElementRef;
	private offsets: number[];
	private router: Router;
	private routerEventsSubscription: Subscription | null;
	private routerOutlet: RouterOutlet;

	// I initialize the router-outlet directive.
	constructor(
		domUtils: DomUtils,
		elementRef: ElementRef,
		router: Router,
		routerOutlet: RouterOutlet
		) {

		this.domUtils = domUtils;
		this.elementRef = elementRef;
		this.router = router;
		this.routerOutlet = routerOutlet;

		this.activateEventsSubscription = null;
		this.deactivateEventsSubscription = null;
		this.offsets = [];
		this.routerEventsSubscription = null;

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I get called when the directive is being destroyed.
	public ngOnDestroy() : void {

		( this.activateEventsSubscription ) && this.activateEventsSubscription.unsubscribe();
		( this.deactivateEventsSubscription ) && this.deactivateEventsSubscription.unsubscribe();
		( this.routerEventsSubscription ) && this.routerEventsSubscription.unsubscribe();

	}


	// I get called once after the directive's inputs have been initialized.
	public ngOnInit() : void {

		// In order to help with natural scroll behavior, we have to listen for the
		// creation and destruction of router View component.s
		this.activateEventsSubscription = this.routerOutlet.activateEvents.subscribe(
			( event: any ) : void => {

				this.handleActivateEvent();

			}
		);
		this.deactivateEventsSubscription = this.routerOutlet.deactivateEvents.subscribe(
			( event: any ) : void => {

				this.handleDectivateEvent();

			}
		);

		// In order to make sure the offsets don't get applied inappropriately in the
		// future, we have to listen for navigation events.
		this.routerEventsSubscription = this.router.events.subscribe(
			( event: NavigationEvent ) : void => {

				this.handleNavigationEvent( event );

			}
		);

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I get called when a new router View component is being rendered.
	private handleActivateEvent() : void {

		if ( ! this.offsets.length ) {

			return;

		}

		console.group( "Ensuring Ancestral Scroll Offsets in New Navigation" );
		console.log( this.offsets.slice() );
		console.groupEnd();

		// At this point, the View-in-question has been mounted in the DOM (Document
		// Object Model). We can now walk back up the DOM and make sure that the
		// previously-recorded offsets (in the last "deactivate" event) are being applied
		// to the ancestral elements. This will prevent the browser's native desire to
		// auto-scroll-down a document once the view has been injected. Essentially, this
		// ensures that we scroll back to the "expected top" as the user clicks through
		// the application.
		var node = this.elementRef.nativeElement.parentNode;

		while ( node ) {

			// If this is an ELEMENT node, set its offset.
			if ( node.nodeType === 1 ) {

				this.domUtils.scrollTo( node, this.offsets.shift() || 0 );

			}

			node = node.parentNode;

		}

		// At the top, we'll always set the window's scroll.
		this.domUtils.scrollTo( window, this.offsets.shift() || 0 );

	}


	// I get called when an existing router View component is being unmounted.
	private handleDectivateEvent() : void {

		// At this point, the View-in-question has already been removed from the
		// document. Let's walk up the DOM (Document Object Model) and record the scroll
		// position of all scrollable elements. This will give us a sense of what the DOM
		// should look like after the next View is injected.
		var node = this.elementRef.nativeElement.parentNode;

		while ( node ) {

			// If this is an ELEMENT node, capture its offset.
			if ( node.nodeType === 1 ) {

				this.offsets.push( this.domUtils.getScrollTop( node ) );

			}

			node = node.parentNode;

		}

		// At the top, we'll always record the window's scroll.
		this.offsets.push( this.domUtils.getScrollTop( window ) );

	}


	// I get called whenever a router event is raised.
	private handleNavigationEvent( event: NavigationEvent ) : void {

		// The "offsets" are only meant to be used across a single navigation. As such,
		// let's clear out the offsets at the end of each navigation in order to ensure
		// that old offsets don't accidentally get applied to a future view mounted by
		// the current router-outlet.
		if ( event instanceof NavigationEnd ) {

			this.offsets = [];

		}

	}

}