如何捕获浏览器 BACK 操作以保持用户在页面中而不刷新？

Question

我正在尝试控制我的 PWA 上的默认 BACK 操作，因为当用户按下手机的后退按钮时，它会扰乱用户体验。

例如，当模式显示时，后退按钮应该关闭模式而不是 go 返回上一页。

经过大量研究和测试，我终于使用以下代码实现了这一点：

$(window).on('popstate', function (e) {

    let goBack = true;
    if($("#modal_box").is(":visible")) {
        goBack = false;
        $("#modal_box").modal('hide');
    }

    if(goBack == true){
        history.back();
    }else {
        // Stay on the current page.
        history.pushState({}, '');
    }

});

但问题在于，当用户向下滚动页面中间或底部的某处时，上面的代码会使视图跳回页面顶部，这让用户感到沮丧。

上面的代码有快速修复吗？ 或者我是否需要使用不同的逻辑，因为我认为 history.pushState 无论如何都会使页面跳到顶部。

更新：谢谢大家的评论。 我想出了一个简单的方法来防止页面滚动（或至少明显滚动），就像@reynolds 建议的那样......但出于某种奇怪的原因，而不是弄乱滚动 state，使用

            history.go(1);

而不是 history.pushState({}, '');

作品！

history.go(1) 发生的事情是，不是让页面重新加载到页面顶部，而是“向前”似乎自动滚动到您之前所在的位置，以一种用户甚至无法注意到的非常非常快的方式了。 这种行为似乎在我测试过的桌面和移动浏览器（Firefox、Chrome、Opera）中是原生的。 美丽的！

Answer 1

history.pushstate不会阻止向后导航，而是在向后导航发生之前将 state 推送到浏览器的历史堆栈。 也就是说，如果您对此没有意见，那么您可以像Viney所说的那样维护页面的前一个 position。 但是，您需要在通过从 state object 加载页面后执行此操作。

像这样捕获滚动条 position：

scrollPos = 0
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
});

然后，将其添加到 state：

if(goBack == true){
    history.back();
}else {
    // Stay on the current page.
    history.pushState({ 'scrollPos': scrollPos }, '');
}

最后，检查页面加载时的 state 并滚动到 scrollPos（如果可用）：

const currentState = history.state;

$(window).on('beforeunload', function() {
    if (currentState && currentState.scrollPos) {
        $(window).scrollTop(currentState.scrollPos); 
    }
});

但是，这也会导致页面在刷新时滚动到 scrollPos。

或者，如果你真的想防止倒退，我建议你先阅读这篇文章。

Answer 2

您可以保留scrollTop值，该值包含滚动了多少 window。

scrollPos = 0
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
});

然后在 pushstate 上更新它

if(goBack == true){
    history.back();
}else {
    // Stay on the current page.
    history.pushState({}, '');
    $(window).scrollTop(scrollPos);
}