stylescape/ts/scroll/ScrollPageManager.ts

Stylescape is a visual identity framework developed by Scape Agency.

/**
 * Manages scroll position using sessionStorage.
 * Restores scroll position on page load and cleans it up after.
 */
export class ScrollPageManager {
    private key = "scrollpos"
    private debounceTimeout: number | null = null

    constructor() {
        this.initialize()
    }

    /**
     * Sets up scroll position tracking and restoration.
     */
    private initialize(): void {
        window.addEventListener("load", () => this.loadScrollPosition())
        window.addEventListener("scroll", () => this.debounceSaveScroll())
        window.addEventListener("beforeunload", () =>
            this.saveScrollPosition(),
        )
    }

    /**
     * Restores scroll position from sessionStorage and clears it.
     */
    private loadScrollPosition(): void {
        const scrollpos = sessionStorage.getItem(this.key)
        if (scrollpos) {
            window.scrollTo(0, parseInt(scrollpos, 10))
            sessionStorage.removeItem(this.key)
            // console.log(
            //     "ScrollPageManager: scroll position restored and cleared",
            // )
        }
    }

    /**
     * Saves scroll position to sessionStorage.
     */
    private saveScrollPosition(): void {
        sessionStorage.setItem(this.key, window.scrollY.toString())
    }

    /**
     * Debounced scroll saving to reduce writes.
     */
    private debounceSaveScroll(): void {
        if (this.debounceTimeout !== null) {
            clearTimeout(this.debounceTimeout)
        }
        this.debounceTimeout = window.setTimeout(() => {
            this.saveScrollPosition()
        }, 200)
    }
}