iOS H5 history.back() 返回上一路由 頁面白屏

問題描述

最近在做H5項目的時候，發現使用history.back()在IOS上返回上一頁的時候，會有很嚴重的bug。我的場景是列表頁滾動了超出一屏之後，進入詳情頁，再點擊返回列表頁，在iOS上就出現了白屏的現象，但是觸屏或者滑一下，頁面就又恢復了。

解決方案

1、使用絕對定位

這個也是參考了網上的寫法，把列表頁高度設爲100%，絕對定位

 .container {
        position: absolute;
        height: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

絕對定位之後，沒有再出現白屏現象。但是，這種寫法體驗非常差，在iOS上滾動很生硬，還會有回彈的現象，而且也不利於容器內部一些樣式的拓展，例如背景圖片等等。

2、改變history.scrollRestoration （推薦）

使用history.back返回上一頁的時候，瀏覽器會記錄頁面的滾動位置，而在iOS上面，滾動後返回的時候頁面渲染會出現問題，導致白屏。可以利用scrollRestoration屬性，它默認是auto，也就是會記錄滾動位置（這是H5新增的屬性，所以需要判斷瀏覽器是否支持，我實踐的是可以兼容大部分移動端機型）

 if ('scrollRestoration' in history) {
            history.scrollRestoration = 'manual'; //改爲manual之後，就不會記錄滾動位置
        }

在列表頁渲染完成的生命週期函數裏添加以上代碼，可以解決白屏問題

參考文章：

• https://stackoverflow.com/questions/10742422/prevent-browser-scroll-on-html5-history-popstate
• https://blog.csdn.net/m0_38069630/article/details/80573283