ts-useful/lib/es2020/smoothscroll.js

Functions for animation, color transitions, ecliptic, bezier, decasteljau, curves, three dimensional curves, smooth scrolling, random range, randomItem, mobius index, vectors, physics vectors, and easing.

import { Animate } from './animate';
import { Easing } from './easing';
export class SmoothScroll {
    constructor() {
        this.framesPerSecond = 60;
        this.duration = 300;
    }
    //	.disable-hover {
    //		pointer-events: none;
    //	}
    async enablePointerEvents() {
        const body = document.body;
        if (body.classList.contains("disable-hover")) {
            body.classList.remove("disable-hover");
        }
    }
    async disablePointerEvents() {
        const body = document.body;
        if (!body.classList.contains("disable-hover")) {
            body.classList.add("disable-hover");
        }
    }
    /**
     *
     * @param element HTMLElement
     * @param options IScrollOptions
     * @returns
     */
    async getLocation(element, options) {
        return {
            bounds: element.getBoundingClientRect(),
            currentY: window.pageYOffset,
            currentX: window.pageXOffset,
            offsetY: options ? options.offsetY || 0 : 0,
            offsetX: options ? options.offsetX || 0 : 0
        };
    }
    /**
     *
     * @param element HTMLElement
     * @param options IScrollOptions
     */
    async scroll(element, options) {
        await this.disablePointerEvents();
        const easeFunc = options && options.easingFunc ? options.easingFunc : Easing.linear;
        const l = await this.getLocation(element, options);
        const scroll = async (pct) => {
            const bez = easeFunc(pct);
            window.scrollTo(l.offsetX + l.currentX + (l.bounds.left) * bez, l.offsetY + l.currentY + (l.bounds.top) * bez);
        };
        await Animate(scroll, {
            fps: options && options.framesPerSecond ? options.framesPerSecond : this.framesPerSecond,
            duration: options && options.duration ? options.duration : this.duration,
            cb: async () => {
                await this.enablePointerEvents();
                if (options?.done) {
                    options.done();
                }
            }
        });
    }
}
//# sourceMappingURL=smoothscroll.js.map