如何捕獲瀏覽器 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);
}