reactjs – 人们如何使用react-router v4处理滚动恢复？

发布时间：2020-12-15 20:54:35 所属栏目：百科来源：网络整理

导读：使用react-router时,我在后退按钮(历史记录popstate)上滚动位置遇到了一些问题. React路由器v4无法处理开箱即用的滚动管理,因为浏览器正在实现一些自动滚动行为.这很好,除非浏览器窗口的高度从一个视图到另一个视图变化太大.我已经实现了ScrollToTop组件,如

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

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

View1：长电影列表(窗口高度3500px).
(点击电影)
View2：所选电影的详细信息视图(窗口高度：1000px).
(单击浏览器后退按钮)
返回视图1,但滚动位置不能超过1000px,因为chrome在尝试渲染长影片列表之前尝试设置位置.

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

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

你如何处理你的卷轴恢复？

结果是浏览器具有history.scrollRestoration的实现.

也许你可以使用它？检查这些链接.

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

另外,我发现一个npm模块可能能够轻松地处理滚动恢复,但是这个库只适用于反应路由器v3及以下版本

https://www.npmjs.com/package/react-router-restore-scroll
https://github.com/ryanflorence/react-router-restore-scroll

我希望这可以提供帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!