浏览器滚动恢复属性History.scrollRestoration

在React新版官网的代码中,发现了一个名为History.scrollRestoration的属性,用于控制页面刷新或返回后是否恢复到原来的滚动位置。该属性有两个值:'auto'表示自动恢复到用户滚动到的位置,而'manual'则表示不恢复,用户需手动滚动到该位置。在React官网的实现中,针对Safari浏览器设置了'auto',而其他浏览器则使用'manual',以优化不同浏览器的用户体验。这一设置有助于避免在Safari浏览器中出现返回时的灰色屏幕问题,同时确保其他浏览器如Chrome和Firefox的用户体验。

后续 2024-05-23

后来发现我被注释给欺骗了,虽然_app.tsx里面说让nextjs设置scrollRestoration为manual,但是其实他们的项目中nextjs的scrollRestoration就是true。
与之前的注释不符...
notion image
notion image

浏览器滚动恢复属性History.scrollRestoration

最近在阅读 React 新版官网的代码时,发现在_app.tsx中有这样一段代码。
这里用到了我没有接触过的一个属性 History.scrollRestoration,发现这个属性是用来控制页面刷新或者返回后是否滚动到原来的位置。
属性的值:
  1. auto 将恢复用户已滚动到的页面上的位置。
  1. manual 未还原页上的位置。用户必须手动滚动到该位置。
在 mdn 文档中没有看到 auto 是默认值,但是自己手动验证以及在google blog 中提到:
所以 auto 确实是默认值没错。

举例

  1. 如果 history.scrollRestoration = 'auto'; 自动回到原有位置。
  1. 如果 history.scrollRestoration = 'manual'; 回到顶部。

在 react.dev (新版官网)中为什么要使用 manul

这是因为这个项目用的 next.js,涉及到 ssr,可能出现页面还没渲染完就滚动到了之前的位置。(待补充例子。)可以看一下这篇文档Next.js 中怎么保持页面的滚动位置
上一篇
各种软件使用方式梳理
下一篇
node path模块相关操作