scroll.service.ts

import { Observable, animationFrameScheduler, fromEvent, of } from "rxjs";
import { distinctUntilChanged, filter, map, pairwise, switchMap, throttleTime } from "rxjs/operators";
import { ScrolType, ScrollMovement } from "./types";

export const watchScroll$ = (): Observable<ScrollType> =>
    of(typeof window === "undefined")
        .pipe(
            filter((undefinedWindow) => (!undefinedWindow)),
            switchMap(() => fromEvent(window, "scroll", {passive: true})),
            throttleTime(0, animationFrameScheduler),
            map(() => (window.pageYOffset)),
            pairwise(),
            map(([previous, current]) =>
                (
                    current < previous || current === 0
                        ? ScrollMovement.UP
                        : ScrollMovement.DOWN
                )
            ),
            distinctUntilChanged()
        );