onscroll添加URL哈希创建浏览器历史：Firefox正常Chrome异常

你的问题核心在于：当从#reading回退到#loaded时，页面不会重新加载，因此不会重新绑定滚动事件监听——而第一次滚动触发后你已经移除了监听，导致后续滚动无法触发pushState生成新历史条目。Chrome和Firefox的表现差异源于浏览器对页面回退时的缓存/执行逻辑不同，但本质问题是缺少回退到#loaded时的监听重新绑定。

另外，你的代码还有几个潜在问题：

• 未用let/const声明变量，导致全局变量污染
• history.pushState()不会触发hashchange事件，因此#reading的逻辑不会自动执行
• 滚动事件可能因微小滚动误触发，建议增加触发阈值

修正后的代码 #

页面初始化与滚动监听逻辑 #

// 初始化滚动监听（仅当hash为#loaded时）
function initScrollListener() {
    const currentHash = window.location.hash;
    if (currentHash === "#loaded") {
        // 先移除可能存在的监听，避免重复绑定
        window.removeEventListener("scroll", checkScroll);
        window.addEventListener("scroll", checkScroll);
    }
}

// 页面加载时执行初始化
window.addEventListener("load", initScrollListener);

function checkScroll() {
    // 防抖：仅当滚动距离超过50px时才触发（避免微小滚动误触）
    if (window.scrollY < 50) return;

    const originalUrl = window.location.href;
    let cleanUrl = originalUrl.split('?')[0];
    cleanUrl = cleanUrl.split('#')[0];
            
    const stateObj = { page: "scrolled" };
    const newUrl = cleanUrl + "#reading";
    history.pushState(stateObj, "", newUrl);

    // 手动触发#reading的逻辑（因为pushState不触发hashchange）
    handleHashChange("#reading");

    // 移除滚动监听，避免重复触发
    window.removeEventListener("scroll", checkScroll);
}

Hash变更处理逻辑 #

<body>
<script>
function handleHashChange(hash = window.location.hash) {
    switch(hash) {
        case "#reading":
            console.log("started reading");
            // 执行你的业务逻辑
            break;
        case "#loaded":
            console.log("back to loaded");
            // 回退到#loaded时，重新绑定滚动监听
            initScrollListener();
            // 执行你的其他业务逻辑
            break;
    }
}

// 绑定hashchange事件
window.addEventListener("hashchange", handleHashChange);
</script>
</body>

关键修正点说明 #

1. 回退时重新绑定监听：在handleHashChange的#loaded分支中调用initScrollListener，确保回退后再次滚动能触发pushState生成新历史条目。
2. 避免全局变量污染：用const/let声明所有变量，减少意外冲突。
3. 手动触发hash逻辑：因为pushState不会触发hashchange事件，所以在调用pushState后直接执行#reading对应的逻辑。
4. 滚动触发阈值：增加scrollY判断，避免页面加载时的微小滚动（比如浏览器默认滚动位置）误触发逻辑。
5. 安全绑定监听：在initScrollListener中先移除监听再添加，防止重复绑定导致多次触发。

经过这些修正后，Chrome和Firefox都会保持一致的行为：每次回退到#loaded后滚动，都会生成新的#reading历史条目，点击回退按钮也能正常回到#loaded。

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