移动端iOS返回上一路由页面部分白屏，滑动后恢复正常

问题描述

移动端iOS页面在使用router.back()或者其他方式返回到上一页的时候，页面渲染上半部分白屏，滑动一下后恢复正常。

主要的场景是A页面超出屏幕高度，滑动到底部，进入B页面后，再次返回A页面，这时候出现部分白屏。

解决方案

从B页面返回时，浏览器会记录页面滚动位置。可以利用scrollRestoration属性，它默认是auto，也就是会记录滚动位置（这是H5新增的属性，所以需要判断浏览器是否支持，兼容大部分移动端机型）

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

示例：

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之后，就不会记录滚动位置
}

参考MDN

History.scrollRestoration

History 的接口——滚动恢复属性允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为

• auto

  • 将恢复用户已滚动到的页面上的位置。

• manual

  • 未还原页上的位置。用户必须手动滚动到该位置。

参考博客

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