Monitoring Document And Element Scroll Percentages Using RxJS In Angular 6.0.2

// Import the core angular services.
import { Component } from "@angular/core";
import { OnInit } from "@angular/core";
import range = require( "lodash/range" );

// Import the application components and services.
import { ElementScrollPercentage } from "./element-scroll-percentage";

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

@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		<div class="scroll-progress scroll-progress--fixed">
			<div class="scroll-progress__indicator" [style.width.%]="pageScroll">
				<br />
			</div>
		</div>

		<p *ngFor="let i of demoRange">
			Content goes here ...
		</p>

		<div class="inner">
			<div class="scroll-progress scroll-progress--absolute">
				<div class="scroll-progress__indicator" [style.width.%]="innerScroll">
					<br />
				</div>
			</div>

			<div
				(scrollPercentage)="recordInnerScroll( $event )"
				class="inner__content">

				<p *ngFor="let i of demoRange">
					Content goes here ...
				</p>

			</div>
		</div>

		<p *ngFor="let i of demoRange">
			Content goes here ...
		</p>
	`
})
export class AppComponent implements OnInit {

	public demoRange: number[];
	public innerScroll: number;
	public pageScroll: number;

	private elementScrollPercentage: ElementScrollPercentage;

	// I initialize the app-component.
	constructor( elementScrollPercentage: ElementScrollPercentage ) {

		this.elementScrollPercentage = elementScrollPercentage;

		this.demoRange = range( 15 );
		this.innerScroll = 0;
		this.pageScroll = 0;


	}

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

	// I get called once after the inputs have been bound for the first time.
	public ngOnInit() : void {

		this.elementScrollPercentage
			.getScrollAsStream() // Defaults to Document if no Element supplied.
			.subscribe(
				( percent: number ) : void => {

					this.pageScroll = percent;

				}
			)
		;

	}


	// I record the element scroll percentage of the inner content area, applying it
	// to the inner status bar.
	public recordInnerScroll( percent: number ) : void {

		this.innerScroll = percent;

	}

}

// Import the core angular services.
import { fromEvent } from "rxjs";
import { Injectable } from "@angular/core";
import { map } from "rxjs/operators";
import { Observable } from "rxjs";

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

type Target = Document | Element;

@Injectable({
	providedIn: "root"
})
export class ElementScrollPercentage {

	// I initialize the element scroll percentage service.
	constructor() {
		// ...
	}

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

	// I return the current scroll percentage (0,100) of the given DOM node.
	public getScroll( node: Target = document ) : number {

		var currentScroll = this.getCurrentScroll( node );
		var maxScroll = this.getMaxScroll( node );

		// Ensure that the percentage falls strictly within (0,1).
		var percent = ( currentScroll / Math.max( maxScroll, 1 ) );
		percent = Math.max( percent, 0 );
		percent = Math.min( percent, 1 );

		// Return the percentage in a more human-consumable format.
		return( percent * 100 );

	}


	// I return the current scroll percentage (0,100) of the given DOM node as a STREAM.
	// --
	// NOTE: The resultant STREAM is a COLD stream, which means that it won't actually
	// subscribe to the underlying DOM events unless something in the calling context
	// subscribes to the COLD stream.
	public getScrollAsStream( node: Target = document ) : Observable<number> {

		if ( node instanceof Document ) {

			// When we watch the DOCUMENT, we need to pull the scroll event from the
			// WINDOW, but then check the scroll offsets of the DOCUMENT.
			var stream = fromEvent( window, "scroll" ).pipe(
				map(
					( event: UIEvent ) : number => {

						return( this.getScroll( node ) );

					}
				)
			);

		} else {

			// When we watch an ELEMENT node, we can pull the scroll event and the scroll
			// offsets from the same ELEMENT node (unlike the Document version).
			var stream = fromEvent( node, "scroll" ).pipe(
				map(
					( event: UIEvent ) : number => {

						return( this.getScroll( node ) );

					}
				)
			);

		}

		return( stream );

	}

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

	// I return the current scroll offset (in pixels) of the given DOM node.
	private getCurrentScroll( node: Target ) : number {

		if ( node instanceof Document ) {

			return( window.pageYOffset );

		} else {

			return( node.scrollTop );

		}

	}


	// I return the maximum scroll offset (in pixels) of the given DOM node.
	private getMaxScroll( node: Target ) : number {

		// When we want to get the available scroll height of the DOCUMENT, things get
		// a little peculiar from a cross-browser consistency standpoint. As such, when
		// dealing with the Document node, we have to look in a few different places.
		// --
		// READ MORE: https://javascript.info/size-and-scroll-window
		if ( node instanceof Document ) {

			var scrollHeight = Math.max(
				node.body.scrollHeight,
				node.body.offsetHeight,
				node.body.clientHeight,
				node.documentElement.scrollHeight,
				node.documentElement.offsetHeight,
				node.documentElement.clientHeight
			);

			var clientHeight = node.documentElement.clientHeight;

			return( scrollHeight - clientHeight );

		} else {

			return( node.scrollHeight - node.clientHeight );

		}

	}

}

// Import the core angular services.
import { Directive } from "@angular/core";
import { ElementRef } from "@angular/core";
import { EventEmitter } from "@angular/core";
import { Observable } from "rxjs";
import { OnDestroy } from "@angular/core";
import { OnInit } from "@angular/core";
import { Subscription } from "rxjs";

// Import the application components and services.
import { ElementScrollPercentage } from "./element-scroll-percentage";

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

@Directive({
	selector: "[scrollPercentage]",
	outputs: [ "scrollPercentageEvent: scrollPercentage" ]
})
export class ElementScrollPercentageDirective implements OnInit, OnDestroy {

	public scrollPercentageEvent: EventEmitter<number>;

	private elementRef: ElementRef;
	private elementScrollPercentage: ElementScrollPercentage;
	private subscription: Subscription;

	// I initialize the element scroll percentage directive.
	constructor(
		elementRef: ElementRef,
		elementScrollPercentage: ElementScrollPercentage
		) {

		this.elementRef = elementRef;
		this.elementScrollPercentage = elementScrollPercentage;

		this.scrollPercentageEvent = new EventEmitter();
		this.subscription = null;

	}

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

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

		( this.subscription ) && this.subscription.unsubscribe();

	}


	// I get called once after the inputs have been bound for the first time.
	public ngOnInit() : void {

		// The purpose of the directive is to act as the GLUE between the element scroll
		// service and the host element for this directive. Let's subscribe to the scroll
		// events and then pipe them into the output event for this directive.
		this.subscription = this.elementScrollPercentage
			.getScrollAsStream( this.elementRef.nativeElement )
			.subscribe(
				( percent: number ) : void => {

					this.scrollPercentageEvent.next( percent );

				}
			)
		;

	}

}