移動設備上的 Safari 瀏覽器后退按鈕，不會將用戶返回到上一頁的最后滾動位置

Question

我試圖讓我的網頁在用戶單擊瀏覽器后退按鈕時將用戶返回到上一頁的最后滾動位置。

應該發生什么：

用戶單擊頁面上的鏈接，將他們定向到不同的站點，然后當他們單擊瀏覽器后退按鈕時，他們應該返回到最后滾動位置的上一頁。 這在 macOS 上的 Chrome 和 Safari 上自動正常工作，無需代碼。

問題：

在 iPhone 上的 Safari 上進行測試時，用戶總是返回到網頁的頂部，而不是他們最后的滾動位置。

單擊瀏覽器后退按鈕時，移動設備上的 Safari 為何返回上一頁頂部，是否有任何已知原因？

代碼：下面的代碼嘗試將最后一個滾動位置保存在 localStorage 中，然后在 popState 被觸發時滾動到該位置。 使用 PopState 是因為在 Safari 上單擊后退按鈕時，其他觸發器（如 load）似乎不起作用。 考慮到這些，它仍然不起作用。

我不確定 popstate 在移動設備上是否以不同的方式觸發，或者在退出網頁時 localStorage 是否未保存。

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

    var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    if(is_safari){
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }
     var scroll = window.localStorage.getItem('scroll');
     if (scroll !== null) $(document).scrollTop( scroll );

    }
 });


$(window).on('scroll', function() {
    window.localStorage.setItem("scroll", $(document).scrollTop());
 });

Answer 1

我能夠找到一個臨時解決方案，但我仍然認為它可以改進。

解釋：

使用遞歸函數和本地存儲，我能夠跟蹤並不斷更新滾動位置。 當點擊外部鏈接時，滾動位置被保存，並且在本地存儲中將“標志變量”設置為 0。

當用戶通過瀏覽器返回按鈕返回時，遞歸函數開始不斷將滾動位置更新為保存在本地存儲中的變量。 然后，一旦用戶拖動屏幕，'flag-variable' 將更改為 1，並且該函數停止更新滾動位置，以便用戶可以自由拖動。

代碼：

// check if browser is Safari
window.is_safari = true;
$(document).ready(function(){
  window.is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
});

// when external link is clicked store scroll position and flag to localStorage
$('.external-link').on('click', function() {

    // save scroll position to local storage
    window.localStorage.setItem("scroll", $(document).scrollTop());

    // check the size of window (most likely on touch screen if below this size)
    if($(window).width() <= 1000)
    {

    // save flag variable to local storage
    window.localStorage.setItem("returnPos", 0);
    }
 });


 function repeatFunction(){

    if(window.localStorage.getItem('returnPos') == 0)
    {
        // keep the scroll position the same as localStorage variable
        $(document).scrollTop( window.localStorage.getItem('scroll') );

        // once user drags change flag to one so this if statement doesn't get entered
        // and scroll position can move freely
        $(document).on('mousedown touchstart', function() 
        {
            window.localStorage.setItem("returnPos", 1); 
        });
    }
    // if Safari keep calling function 
    if(window.is_safari){
    setTimeout(repeatFunction, 100);
    }
}

$(document).ready(function(){
    repeatFunction();
});

潛在問題：

我認為您的網站可能會因為使用這個遞歸函數而開始運行變慢。 不幸的是，我無法獲得$(window).on('popstate', function(event) {}); 在 Safari 上觸發，因此我不確定如何檢測頁面是通過后退按鈕重新加載的。

此外，如果用戶使用的觸摸屏大於 if 語句中檢查的值，則此方法將不起作用。 如果用戶使用的桌面屏幕小於 if 語句中檢查的值，則他們必須先單擊，然后才能通過 Safari 瀏覽器的后退按鈕返回頁面進行滾動。