@kizivat/svelte-autoscroll/dist/index.js

Svelte action to automatically scroll to the end of an element.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
export default function autoscroll(node, options = {
    behavior: 'smooth',
}) {
    const forbiddenOverflows = ['visible', 'hidden'];
    if (forbiddenOverflows.includes(getComputedStyle(node).overflowX) &&
        forbiddenOverflows.includes(getComputedStyle(node).overflowY)) {
        console.warn('Autoscroll element will never scroll. Set at least one of `overflow-x` or `overflow-y` to either `auto` or `scroll`.');
    }
    const _a = Object.assign({ behavior: 'smooth' }, options), { pauseOnUserScroll: _ } = _a, scrollOptions = __rest(_a, ["pauseOnUserScroll"]);
    const scroll = () => {
        node.scrollTo(Object.assign({ top: node.scrollHeight, left: node.scrollWidth }, scrollOptions));
    };
    // for when children change sizes
    const resizeObserver = new ResizeObserver(_ => {
        scroll();
    });
    // for when children are added or removed/subtree changes
    const mutationObserver = new MutationObserver(_ => {
        scroll();
    });
    const observeAll = () => {
        // observe size of all children
        for (const child of node.children) {
            resizeObserver.observe(child);
        }
        mutationObserver.observe(node, { childList: true, subtree: true });
    };
    observeAll();
    const handleScroll = () => {
        if (node.scrollTop + node.clientHeight < node.scrollHeight) {
            mutationObserver.disconnect();
            resizeObserver.disconnect();
        }
        else {
            observeAll();
        }
    };
    if (options.pauseOnUserScroll) {
        node.addEventListener('scroll', handleScroll);
    }
    return {
        update({ pauseOnUserScroll, behavior }) {
            if (pauseOnUserScroll) {
                node.addEventListener('scroll', handleScroll);
                mutationObserver.disconnect();
                resizeObserver.disconnect();
            }
            else {
                node.removeEventListener('scroll', handleScroll);
                observeAll();
            }
        },
        destroy() {
            if (mutationObserver) {
                mutationObserver.disconnect();
            }
            if (resizeObserver) {
                resizeObserver.disconnect();
            }
            if (options.pauseOnUserScroll) {
                node.removeEventListener('scroll', handleScroll);
            }
        },
    };
}
//# sourceMappingURL=index.js.map