Wu Yudong's Blog

要实现在页面刷新后保持div元素水平滚动条的位置不变，你可以通过几种不同的方法来实现。这里我将介绍两种常见的方法：使用JavaScript和HTML5的本地存储（LocalStorage）。

方法1：使用HTML5的LocalStorage

你可以通过监听滚动事件并存储滚动位置，然后在页面加载时恢复这个位置。

<div id="scrollableDiv" style="width: 300px; height: 200px; overflow-x: auto;">
    <!-- 你的内容 -->
    <p>这是一些文本内容，足够长以至于需要水平滚动。</p>
</div>

js：

document.addEventListener('DOMContentLoaded', function() {
    var scrollableDiv = document.getElementById('scrollableDiv');
    var scrollPosition = localStorage.getItem('scrollPosition');
 
    if (scrollPosition) {
        scrollableDiv.scrollLeft = parseInt(scrollPosition);
    }
 
    scrollableDiv.addEventListener('scroll', function() {
        localStorage.setItem('scrollPosition', this.scrollLeft);
    });
});

方法2：使用URL哈希（适用于锚点滚动）

如果你的div内容很长，并且你想通过URL的哈希部分来控制滚动位置，你可以使用锚点链接。这种方法通常用于页面内导航，但也可以稍微修改以适应你的需求。

document.addEventListener('DOMContentLoaded', function() {
    var scrollToHash = function() {
        var hash = window.location.hash;
        if (hash) {
            var element = document.getElementById(hash.substring(1)); // 移除'#'字符并获取元素ID
            if (element) {
                element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' }); // 平滑滚动到元素位置，并保持水平位置不变（如果需要的话）
            }
        }
    };
    scrollToHash(); // 页面加载时滚动到哈希位置（如果存在）
    window.addEventListener('hashchange', scrollToHash); // 监听哈希变化以更新滚动位置
});

结论

选择哪种方法取决于你的具体需求和偏好。如果你只是想简单地存储和恢复滚动位置，使用localStorage的方法是最直接和简单的。如果你希望利用URL的哈希部分进行页面内导航，那么第二种方法可能更适合你。每种方法都有其适用场景，你可以根据实际情况选择最合适的方法。