@daysnap/horn-use/es/useKeepPosition/index.js

horn use

import { pick } from '@daysnap/utils';
import { onActivated, nextTick, ref } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';
export const useKeepPosition = (options) => {
    const { getTarget = () => document.documentElement } = options ?? {};
    const state = ref();
    // 保存位置
    const keep = () => {
        const target = getTarget();
        if (target) {
            state.value = pick(target, ['scrollTop', 'scrollLeft']);
        }
    };
    // 恢复
    const restore = () => {
        nextTick(() => {
            const target = getTarget();
            if (target) {
                const { scrollLeft = 0, scrollTop = 0 } = state.value ?? {};
                state.value = undefined;
                const setScroll = () => {
                    target.scrollLeft = scrollLeft;
                    target.scrollTop = scrollTop;
                };
                setScroll();
            }
        });
    };
    // 保存位置
    onBeforeRouteLeave(() => keep());
    // 恢复位置
    onActivated(() => restore());
    return { keep, restore };
};