移动端iOS返回上一路由页面白屏

问题描述

1、最近在做H5项目的时候，发现使用history.back()在IOS上返回上一页的时候，会有很严重的bug。我的场景是列表页滚动了超出一屏之后，进入详情页，再点击返回列表页，在iOS上就出现了白屏的现象，但是触屏或者滑一下，页面就又恢复了。

解决方案

使用history.back返回上一页的时候，浏览器会记录页面的滚动位置，而在iOS上面，滚动后返回的时候页面渲染会出现问题，导致白屏。可以利用scrollRestoration属性，它默认是auto，也就是会记录滚动位置（这是H5新增的属性，所以需要判断浏览器是否支持，我实践的是可以兼容大部分移动端机型）

    if ('scrollRestoration' in window.history) {
      window.history.scrollRestoration = 'manual'; // 改为manual之后，就不会记录滚动位置
    }

在列表页渲染完成的生命周期函数里添加以上代码，可以解决白屏问题

2、a页面是一个长列表，我们滑动到某个地方假设为 100px ，点击之后进入到b页面

• b页面也滚到到100px，产品希望b页面回到顶部
• 再从b页面回到a页面，这时候浏览器的滚动条会自动回到我们跳转前的位置，也就是 100px 的位置。产品希望回到顶部去

 b页面代码

window.scrollTo && window.scrollTo(0, 0); // 滚动到初始位置

a页面代码

    if ('scrollRestoration' in window.history) {
      window.history.scrollRestoration = 'manual'; // 改为manual之后，就不会记录滚动位置
    }