页面刷新时保留侧边栏滚动位置的JS脚本错误排查

你的脚本一共存在4个核心问题，直接导致功能完全不生效：

• querySelectorAll 方法调用错误：该方法仅支持传入选择器字符串作为唯一入参，不支持传入回调函数作为第二个参数，你写在回调里的所有逻辑从一开始就不会被执行。
• 滚动事件绑定方式错误：DOM元素的scroll()方法是用来主动控制元素滚动位置的API，不支持传入回调绑定事件，监听滚动需要用addEventListener('scroll', 回调函数)的标准写法。
• 滚动位置恢复时机错误：没有等DOM和侧边栏内容渲染完成就执行滚动赋值，此时侧边栏还未生成实际的内容高度，设置的滚动值会直接失效。
• 类型转换容错性差：用|0位运算做数值转换时，一旦本地存储的值被篡改为非数字内容，会直接返回0，没有异常兜底逻辑。

修正后可直接运行的代码 #

配套CSS要求 #

首先确认你的侧边栏样式满足滚动条件，否则功能不会生效：

.sidebar {
    /* 必须给侧边栏设置固定高度 */
    height: 100vh;
    /* 必须设置内容溢出时显示滚动条 */
    overflow-y: auto;
}

修正后的JS代码 #

document.addEventListener('DOMContentLoaded', () => {
    const sidebar = document.querySelector('.sidebar');
    // 读取存储的滚动位置，异常时默认回到顶部
    const savedPosition = parseInt(localStorage.getItem('sidebarScrollTop')) || 0;
    // 等渲染队列执行完成后恢复滚动位置，避免内容未加载导致赋值失效
    requestAnimationFrame(() => {
        sidebar.scrollTop = savedPosition;
    });
    // 正确绑定滚动监听，滚动时实时保存位置
    sidebar.addEventListener('scroll', () => {
        localStorage.setItem('sidebarScrollTop', sidebar.scrollTop);
    });
});

可选优化 #

如果不同页面的侧边栏内容不一样，不想共用同一个滚动位置，可以给存储的key加上当前页面路径做区分，把存储和读取的key改成sidebarScrollTop_${location.pathname}即可。

内容的提问来源于stack exchange，提问作者YOKA