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

Question

使用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响应.

Answer 1

注意 history.scrollRestoration只是禁止浏览器自动尝试进行滚动还原的一种方法，这种方法通常不适用于单页面应用程序，从而不会干扰应用程序想要执行的任何操作。除了切换到手动滚动恢复之外，您还需要某种库来提供浏览器的历史API，React的呈现以及窗口和任何可滚动块元素的滚动位置之间的集成。

在找不到适用于React Router 4的滚动恢复库后，我创建了一个名为react-scroll-manager的库。它支持滚动到导航到新位置的顶部（又称为历史记录推送），以及向后/前进滚动恢复（又称历史记录弹出）。除了滚动窗口，它还可以滚动包装在ElementScroller组件中的任何嵌套元素。它还通过使用MutationObserver来监视窗口/元素内容直至用户指定的时间限制，从而支持延迟/异步渲染。这种延迟的渲染支持适用于滚动恢复以及使用哈希链接滚动到特定元素。

npm install react-scroll-manager

import React from 'react';
import { Router } from 'react-router-dom';
import { ScrollManager, WindowScroller, ElementScroller } from 'react-scroll-manager';
import { createBrowserHistory as createHistory } from 'history';

class App extends React.Component {
  constructor() {
    super();
    this.history = createHistory();
  }
  render() {
    return (
      <ScrollManager history={this.history}>
        <Router history={this.history}>
          <WindowScroller>
            <ElementScroller scrollKey="nav">
              <div className="nav">
                ...
              </div>
            </ElementScroller>
            <div className="content">
              ...
            </div>
          </WindowScroller>
        </Router>
      </ScrollManager>
    );
  }
}

请注意，需要使用HTML5浏览器（对于IE为10+）和React 16。HTML5提供了历史API，该库使用了React 16中的现代Context和Ref API。

Answer 2

您如何处理卷轴修复工作？

结果浏览器已经实现了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 模块可能能够轻松处理滚动恢复，但该库仅适用于 React router v3 及以下版本

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

我希望这能有所帮助。