人们如何使用 react-router v4 处理滚动恢复? [英] How do people handle scroll restoration with react-router v4?

问题描述

在使用 react-router 时，我在后退按钮(历史弹出状态)上的滚动位置遇到了一些问题.React router v4 不处理开箱即用的滚动管理，因为浏览器正在实现一些自动滚动行为.这很好，除非浏览器窗口的高度从一个视图到另一个视图变化太大.我已经实现了 ScrollToTop 组件，如下所述:https://reacttraining.com/react-router/web/guides/scroll-retoration

I'm experiencing some problems with scroll positions on the back button (history popstate) when using react-router. React router v4 doesn't handle scroll management out of the box because browsers are implementing some automatic scroll behavior. This is great except when the height of the browser window changes too dramatically from one view to another. I have implemented the ScrollToTop component as described here: https://reacttraining.com/react-router/web/guides/scroll-restoration

这很好用.当您单击链接并转到不同的组件时，浏览器会滚动到顶部(就像普通的服务器呈现的网站一样).只有当您返回(通过浏览器后退按钮)到具有更高窗口高度的视图时才会出现此问题.似乎 (chrome) 试图在 react 呈现内容(和浏览器高度)之前转到上一页的滚动位置.这导致滚动只会根据它来自的视图的高度尽可能向下移动.想象一下这个场景:

This works great. When you click a link and go to a different component, the browser scrolls to the top (like a normal server-rendered website would). The issue only happens when you go back (via the browser back button) to a view with a much taller window height. It seems that (chrome) tries to go to the scroll position of the previous page before react has rendered the content (and browser height). This results in the scroll only going as far down as it can based on the height of the view it's coming from. Picture this scenario:

View1:一长串电影(窗口高度 3500 像素).
(电影被点击)
View2:所选电影的详细视图(窗口高度:1000 像素).
(点击浏览器返回按钮)
返回视图1，但是滚动位置不能超过1000px，因为chrome试图在react渲染长电影列表之前设置位置.

View1: Long list of movies (window height 3500px).
(movie is clicked)
View2: Details view of the selected movie (window height: 1000px).
(Browser back button is clicked)
Back to view 1, but scroll position can't go further than 1000px, because chrome is trying to set the position before react renders the long movie list.

出于某种原因，这只是 Chrome 中的一个问题.Firefox 和 Safari 似乎处理得很好.我想知道其他人是否遇到过这个问题，以及你们通常如何在 React 中处理滚动恢复.

For some reason this is only a problem in Chrome. Firefox and Safari seem to handle it fine. I wonder if anyone else have had this problem, and how you guys generally handle scroll restoration in React.

注意:所有电影都是从 sampleMovies.js 导入的 - 所以在我的示例中我不会等待 API 响应.

Note: all the movies are imported from a sampleMovies.js — so I'm not waiting for an API response in my example.

推荐答案

你如何处理你的滚动恢复?

How do you handle your scroll restoration?

事实证明浏览器具有 history.scrollRestoration 的实现.

Turns out browsers have implementations of the history.scrollRestoration.

也许你可以使用它?查看这些链接.

Maybe you can use that? Check these links out.

https://developer.mozilla.org/en/docs/Web/API/History#Specificationshttps://developers.google.com/web/更新/2015/09/history-api-scroll-restoration

此外，我发现了一个 npm 模块，它可能能够轻松地在 react 中处理滚动恢复，但该库仅适用于 react router v3 及以下版本

In addition, I found an npm module that might be able to handle scroll restoration in react with ease, but this library only works with react router v3 and below

https://www.npmjs.com/package/react-router-恢复滚动https://github.com/ryanflorence/react-router-restore-scroll

我希望这能有所帮助.

这篇关于人们如何使用 react-router v4 处理滚动恢复?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！