刷新网页时如何保持可滚动表格内的垂直滚动位置不变

你当前的滚动操作是在.fixTableHead容器内完成的，你之前的代码读写的是整个浏览器窗口的滚动位置，自然不会生效，只需要把滚动位置的读写对象切换为这个表格容器即可。

替换你原有的<script>标签内的代码为以下内容即可生效：

document.addEventListener("DOMContentLoaded", function() { 
    const tableScrollContainer = document.querySelector('.fixTableHead');
    const savedScrollTop = localStorage.getItem('table_scroll_position');
    if (savedScrollTop) {
        tableScrollContainer.scrollTop = savedScrollTop;
    }
});

window.addEventListener('beforeunload', function() {
    const tableScrollContainer = document.querySelector('.fixTableHead');
    localStorage.setItem('table_scroll_position', tableScrollContainer.scrollTop);
});

如果想要更稳定的存储效果，避免部分场景下beforeunload未触发导致位置丢失，也可以用实时滚动监听的版本：

document.addEventListener("DOMContentLoaded", function() { 
    const tableScrollContainer = document.querySelector('.fixTableHead');
    const savedScrollTop = localStorage.getItem('table_scroll_position');
    if (savedScrollTop) {
        tableScrollContainer.scrollTop = savedScrollTop;
    }
    // 滚动时实时存储位置
    tableScrollContainer.addEventListener('scroll', function() {
        localStorage.setItem('table_scroll_position', this.scrollTop);
    });
});

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