javascript闭包怎样保存滚动位置

function createScrollPositionManager(element) {
    // 这个变量会被内部的save和restore方法“记住”
    let savedScrollTop = 0;

    if (!element || typeof element.scrollTop === 'undefined') {
        console.error('提供的元素无效或不支持滚动。');
        // 返回一个空的管理器，避免后续错误
        return {
            save: () => console.warn('无法保存滚动位置：元素无效。'),
            restore: () => console.warn('无法恢复滚动位置：元素无效。')
        };
    }

    return {
        /**
         * 保存当前元素的滚动位置。
         * 这是一个闭包，它访问并修改了外部作用域的 savedScrollTop 变量。
         */
        save: function() {
            savedScrollTop = element.scrollTop;
            console.log(`滚动位置已保存: ${savedScrollTop}`);
        },

        /**
         * 将元素滚动到之前保存的位置。
         * 同样是闭包，它读取了外部作用域的 savedScrollTop 变量。
         */
        restore: function() {
            element.scrollTop = savedScrollTop;
            console.log(`滚动位置已恢复到: ${savedScrollTop}`);
        },

        /**
         * 获取当前保存的滚动位置，方便调试或外部判断。
         */
        getSavedPosition: function() {
            return savedScrollTop;
        }
    };
}

// 实际使用示例：
// 假设你有一个ID为 'content-area' 的可滚动元素
// const contentArea = document.getElementById('content-area');
// const scrollManager = createScrollPositionManager(contentArea);

// // 用户滚动了一会儿...
// // 模拟保存滚动位置
// // scrollManager.save();

// // 用户做了其他操作，或者页面刷新（这里闭包的内存状态会丢失，需要配合持久化存储）
// // 模拟恢复滚动位置
// // scrollManager.restore();

// // 如果是单页应用（SPA）内部路由切换，这个闭包实例可以持续存在

function createPersistentScrollManager(elementId, storageKeyPrefix = 'scrollPos_') {
    const key = `${storageKeyPrefix}${elementId}`;
    let savedScrollTop = parseInt(localStorage.getItem(key) || '0', 10); // 尝试从 localStorage 读取

    const element = document.getElementById(elementId);
    if (!element || typeof element.scrollTop === 'undefined') {
        console.error(`无法找到ID为 "${elementId}" 的元素或其不支持滚动。`);
        return {
            save: () => console.warn('无法保存滚动位置：元素无效。'),
            restore: () => console.warn('无法恢复滚动位置：元素无效。')
        };
    }

    // 页面加载时尝试恢复一次（如果元素已经存在且内容已加载）
    // 注意：如果内容是动态加载的，这里可能需要延迟执行
    if (savedScrollTop > 0) {
        // 简单的延迟，确保DOM渲染完成，但更健壮的方案需要监听内容加载事件
        setTimeout(() => {
            element.scrollTop = savedScrollTop;
            console.log(`页面加载时，尝试恢复 ${elementId} 滚动到: ${savedScrollTop}`);
        }, 100); // 稍微延迟一下，给DOM渲染留点时间
    }

    return {
        save: function() {
            const currentScroll = element.scrollTop;
            if (currentScroll !== savedScrollTop) { // 避免不必要的写入
                savedScrollTop = currentScroll;
                localStorage.setItem(key, savedScrollTop.toString());
                console.log(`滚动位置已保存到LocalStorage (${elementId}): ${savedScrollTop}`);
            }
        },
        restore: function() {
            element.scrollTop = savedScrollTop;
            console.log(`滚动位置已从LocalStorage恢复 (${elementId}): ${savedScrollTop}`);
        },
        clear: function() {
            localStorage.removeItem(key);
            savedScrollTop = 0;
            console.log(`滚动位置已清除 (${elementId})。`);
        }
    };
}

// 示例用法：
// const articleScrollManager = createPersistentScrollManager('article-content');

// // 在用户离开页面前（比如beforeunload事件）保存滚动位置
// window.addEventListener('beforeunload', () => {
//     articleScrollManager.save();
// });

// // 或者在SPA路由切换时保存
// // router.beforeEach((to, from, next) => {
// //     articleScrollManager.save(); // 保存当前页面的滚动
// //     next();
// // });
// // router.afterEach((to, from) => {
// //     // 在新页面加载后，如果需要，可以调用新页面的滚动管理器来恢复
// //     // 这需要为每个路由或内容区创建不同的管理器实例
// // });