微信 H5 頁面返回時無法停留在原位置的解決方案

熊能發表於2019-06-13
H5

在微信中瀏覽商品列表的時候滑到了一箇中間的位置，點選了某個商品詳情，可是從詳情頁返回之後發現列表又從第一個開始了，不得不滑回到原來的位置才能繼續瀏覽。
這是一個在微信中特有的問題，用手機自帶的瀏覽器開啟同樣的頁面並不會出現同樣的情況。經過我測試，有部分大型網站也存在這個問題，其原因可能是微信端對頁面的快取做了某些限制。

先用COOKIE記錄上一個頁面滑動的高度，返回之後用JS再滑回去

下載js.cookie.js然後引入到專案中：https://github.com/js-cookie/js-cookie

需要用到這個JS庫的幾個方法：

Cookies.set(paramName, paramValue)，設定cookie
Cookies.get(paramName)，獲取cookie
Cookies.remove(paramName)，刪除cookie

監聽整個頁面的滑動事件：

$(document).ready(function(){
    var _scrollTop = Cookies.get('scrollTop'); //獲取cookie中的頁面高度
    while ($(document).height() <= _scrollTop){ //如果當前頁面高度小余要求達到的高度則調取一次資料
        getData();
    }
    $(document).scrollTop(_scrollTop); //當前頁面設定到cookie中的高度
    Cookies.remove('scrollTop'); //移除cookie
});

載入完頁面之後執行以下方法：

$(window).scroll(function() { //監聽整個頁面滑動的事件
    var _scrollTop = $(document).scrollTop();
    Cookies.set('scrollTop', _scrollTop); //每次滑動都記錄當前高度到cookie中
    if (_scrollTop >= $(document).height() - $(window).height()) { //判斷滑動到底部拉取一次資料
        getData();
    }
});

上面的程式碼中，有一句while語句，它的作用是不停的非同步拉取資料把頁面總高度撐起來，直到整個頁面的高度大於你離開這個列表頁時候的高度，然後再用JS滑到之前的位置，最後刪除COOKIE。

由於用到了迭代，每一次條件判斷都需要等當前輪次的資料讀取完成之後，它的執行才有效。所以非同步獲取資料的AJAX也要增加一個引數async:false，讓AJAX同步執行。

這樣，當你返回的時候就會自動回到原來瀏覽的地方了，實際用起來並沒有什麼延遲感。

如果你的頁面上沒有用到非同步分頁的話，這裡還有個簡易版的：

$(document).ready(function(){
    $(document).scrollTop(Cookies.get('scrollTop'));
    Cookies.remove('scrollTop'); //移除cookie
    $(window).scroll(function(){Cookies.set('scrollTop', $(document).scrollTop())});
});

如果你正好被這個問題困擾，希望能對你有幫助！

相關文章