产品：能实现长列表的滚动恢复嘛？我：... 得加钱

前言

某一天，产品经理找到我，他希望我们能够给用户更好的体验，提供长列表的滚动记忆功能。就是说当鼠标滚轮滚动到长列表的某个位置时，单击一个具体的列表项，就切换路由到了这个列表项的详情页；当导航返回到长列表时，还能回到之前滚动到的位置去。

思路

我低头思考了一阵儿，想到了history引入的scrollRestoration属性，也许可以一试。于是我回答，可以实现，一天工作量吧😂。产品经理听到后，满意地走了，但是我后知后觉，我为数不多的经验告诉我，这事儿可能隐隐有风险😨。但是没办法，no zuo no die。

scrollRestoration

Chrome46之后，history引入了scrollRestoration属性。该属性提供两个值，auto（默认值），以及manual。当设置为auto时，浏览器会原生地记录下window中某个元素的滚动位置。此后不管是刷新页面，还是使用pushState等方法改变页面路由，始终可以让元素恢复到之前的屏幕范围中。但是很遗憾，他只能记录下在window中滚动的元素，而我的需求是某个容器中滚动。

完犊子😡，实现不了。

其实想想也是，浏览器怎么可能知道开发者想要保存哪个DOM节点的滚动位置呢？这事只有开发者自己知道，换句话说，得自己实现。于是乎，想到了一个大致思路是：

发生滚动时将元素容器当时的位置保存起来，等到长列表再次渲染时，再对其重新赋值scrollTop和scrollLeft

真正的开发思路

其实不难想到，滚动恢复应该属于长列表场景中的通用能力，既然如此，那...，夸下的海口是一天，所以没招，只能根据上述的简单思路实现了一个，很low，位置信息保存在localStorage中，算是交了差。但作为一个有追求的程序员，这事必须完美解决，既然通用那么公共组件提上日程😎。在肝了几天之后，出炉的完美解决方案：

在路由进行切换、元素即将消失于屏幕前，记录下元素的滚动位置，当元素重新渲染或出现于屏幕时，再进行恢复。得益于React-Router的设计思路，类似于Router组件，设计滚动管理组件ScrollManager，用于管理整个应用的滚动状态。同理，类似于Route，设计对应的滚动恢复执行者ScrollElement，用以执行具体的恢复逻辑。

滚动管理者-ScrollManager

滚动管理者作为整个应用的管理员，应该具有一个管理者对象，用来设置原始滚动位置，恢复和保存原始的节点等。然后通过Context，将该对象分发给具体的滚动恢复执行者。其设计如下：

export interface ScrollManager {
/**

     * 保存当前的真实DOM节点

     * @param key 缓存的索引

     * @param node

     * @returns

     */
registerOrUpdateNode: (key: string, node: HTMLElement) => void;
/**

     * 设置当前的真实DOM节点的元素位置

     * @param key 缓存的索引

     * @param node

     * @returns

     */
setLocation: (key: string, node: HTMLElement | null) => void;
/**

     * 设置标志，表明location改变时，是可以保存滚动位置的

     * @param key 缓存的索引

     * @param matched

     * @returns

     */
setMatch: (key: string, matched: boolean) => void;
/**

     * 恢复位置

     * @param key 缓存的索引

     * @returns

     */
restoreLocation: (key: string) => void;
/**

     * 清空节点的缓存

     * @param key

     * @returns

     */
unRegisterNode: (key: string) => void;

}

• 
  
• 上述Manager虽然提供了各项能力，但是缺少了缓存对象，也就是保存这些位置信息的地方。使用React.useRef，其设计如下：
  

//缓存位置的具体内容
const locationCache = React.useRef<{

    [key: string]: { x: number; y: number };

}>({});
//原生节点的缓存
const nodeCache = React.useRef<{

    [key: string]: HTMLElement | null;

}>({});
//标志位的缓存
const matchCache = React.useRef<{

    [key: string]: boolean;

}>({});
//清空节点方法的缓存
const cancelRestoreFnCache = React.useRef<{

    [key: string]: () => void;

}>({});

• 
  
• 有了缓存对象，我们就可以实现manager，使用key作为缓存的索引，关于key会在ScrollElement中进行说明。
  

const manager: ScrollManager = {
registerOrUpdateNode(key, node) {

        nodeCache.current[key] = node;

    },
unRegisterNode(key) {

        nodeCache.current[key] = null;
//及时清除

        cancelRestoreFnCache.current[key] && cancelRestoreFnCache.current[key]();

    },
setMatch(key, matched) {

        matchCache.current[key] = matched;
if (!matched) {
//及时清除

            cancelRestoreFnCache.current[key] && cancelRestoreFnCache.current[key]();

        }

    },
setLocation(key, node) {
if (!node) return;

        locationCache.current[key] = { x: node?.scrollLeft, y: node?.scrollTop };

    },
restoreLocation(key) {
if (!locationCache.current[key]) return;
const { x, y } = locationCache.current[key];

        nodeCache.current[key]!.scrollLeft = x;

        nodeCache.current[key]!.scrollTop = y;

    },

};

• 
  
• 之后，便可以通过Context将manager对象向下传递
  

<ScrollManagerContext.Provider value={manager}>

    {props.children}

</ScrollManagerContext.Provider>

• 
  
• 除了上述功能外，manager还有一个重要功能：获知元素在导航切换前的位置。在React-Router中一切路由状态的切换都由history.listen来发起，由于history.listen可以监听多个函数。所以可以在路由状态切换前，插入一段监听函数，来获得节点相关信息。
  

location改变 ---> 获得节点位置信息 ---> 路由update

• 
  
• 在实现中，使用了一个状态shouldChild，来确保监听函数一定在触发顺序上先于Router中的监听函数。实现如下：
  

const [shouldChild, setShouldChild] = React.useState(false);

//利用useLayoutEffect的同步，模拟componentDidMount，为了确保shouldChild在Router渲染前设置
React.useLayoutEffect(() => {
//利用history提供的listen监听能力
const unlisten = props.history.listen(() => {
const cacheNodes = Object.entries(nodeCache.current);

            cacheNodes.forEach((entry) => {
const [key, node] = entry;
//如果matchCache为true，表明从当前路由渲染的页面离开，所以离开之前，保存scroll
if (matchCache.current[key]) {

                    manager.setLocation(key, node);

                }

            });

        });

//确保该监听先入栈，也就是监听完上述回调函数后才实例化Router
setShouldChild(true);
//销毁时清空缓存信息
return () => {

            locationCache.current = {};

            nodeCache.current = {};

            matchCache.current = {};

            cancelRestoreFnCache.current = {};
Object.values(cancelRestoreFnCache.current).forEach((cancel) => cancel());
unlisten();

        };

}, []);

//改造context传递
<ScrollManagerContext.Provider value={manager}>

    {shouldChild && props.children}
</ScrollManagerContext.Provider>

• 
  
• 真正使用时，管理者组件要放在Router组件外侧，来控制Router实例化：
  

<ScrollRestoreManager history={history}>
<Router history={history}>

        ...
</Router>

</ScrollRestoreManager>

滚动恢复执行者-ScrollElement

ScrollElement的主要职责其实是控制真实的HTMLElement元素，决定缓存的key，包括决定何时触发恢复，何时保存原始HTMLElement的引用，设置是否需要保存的位置等等。ScrollElement的props设计如下：

export interface ScrollRestoreElementProps {
/**

     * 必须缓存的key，用来标志缓存的具体元素，位置信息以及状态等，全局唯一

     */
scrollKey: string;
/**

     * 为true时触发滚动恢复

     */

    when?: boolean;
/**

     * 外部传入ref

     * @returns

     */

    getRef?: () => HTMLElement;

    children?: React.ReactElement;

}

• 
  
• ScrollElement本质上可以看作为一个代理，会拿到子元素的Ref，接管其控制权。也可以自行实现getRef传入组件中。首先要实现的就是滚动发生时，记录位置能力：
  

useEffect(() => {
const handler = function (event: Event) {‘
//nodeRef就是子元素的Ref
if (nodeRef.current === event.target) {
//获取scroll事件触发target，并更新位置

            manager.setLocation(props.scrollKey, nodeRef.current);

        }

    };

//使用addEventListener的第三个参数，实现在window上监听scroll事件
window.addEventListener('scroll', handler, true);
return () => window.removeEventListener('scroll', handler, true);

}, [props.scrollKey]);

• 
  
• 接下来处理路由匹配以及DOM变更时处理的能力。注意，这块使用了对useLayoutEffect和useEffect执行时机的理解处理：
  

//使用useLayoutEffect主要目的是为了同步处理DOM，防止发生闪动
useLayoutEffect(() => {
if (props.getRef) {
//处理getRef获取ref
//useLayoutEffect会比useEffect先执行，所以nodeRef一定绑定的是最新的DOM

        nodeRef.current = props.getRef();

    }

if (currentMatch) {
//设置标志，表明当location改变时，可以保存滚动位置

        manager.setMatch(props.scrollKey, true);
//更新ref，代理的DOM可能会发生变化（比如key发生了变化，remount元素）

        nodeRef.current && manager.registerOrUpdateNode(props.scrollKey, nodeRef.current);
//恢复原先滑动过的位置，可通过外部props通知是否需要进行恢复

        (props.when === undefined || props.when) && manager.restoreLocation(props.scrollKey);

    } else {
//未命中标志设置，不要保存滚动位置

        manager.setMatch(props.scrollKey, false);

    }

//每次update注销，并重新注册最新的nodeRef，解决key发生变化的情况
return () => manager.unRegisterNode(props.scrollKey);

});

• 
  
• 上述代码，表示在初次加载或者每次更新时，会根据当前的Route匹配结果与否来处理。如果匹配，则表示ScrollElement组件应是渲染的，此时在effect中执行更新Ref的操作，为了解决key发生变化时DOM发生变化的情况，所以需要每次更新都处理。
  
• 同时设置标识位，相当于告诉manager，node节点此刻已经渲染成功了，可以在离开页面时保存位置信息；如果路由不匹配，那么则不应该渲染，manager此刻也不用保存这个元素的位置信息。主要是为了解决存在路由缓存的场景。
  
• 也可以通过when来控制恢复，主要是用来解决异步请求数据的场景。
  
• 最后判断ScrollElement的子元素是否是合格的
  

//如果有getRef，直接返回children
if (props.getRef) {
return props.children as JSX.Element;

}

const onlyOneChild = React.Children.only(props.children);
//代理第一个child，判断必须是原生的tag
if (onlyOneChild && onlyOneChild.type && typeof onlyOneChild.type === 'string') {
//利用cloneElement，绑定nodeRef
return React.cloneElement(onlyOneChild, { ref: nodeRef });

} else {
console.warn('-----滚动恢复失败，ScrollElement的children必须为单个html标签');

}

return props.children as JSX.Element;

多次尝试机制

在某些低版本的浏览器中，可能存在一次恢复并不如预期的情况。所以实现多次尝试能力，其原理就是用一个定时器多次执行callback，同时设定时间上限，并返回一个取消函数给外部，如果最终结果理想则取消尝试，否则再次尝试直到时间上限内达到理想位置。更改恢复函数：

restoreLocation(key) {
if (!locationCache.current[key]) return;
const { x, y } = locationCache.current[key];
//多次尝试机制
let shouldNextTick = true;

    cancelRestoreFnCache.current[key] = tryMutilTimes(
() => {
if (shouldNextTick && nodeCache.current[key]) {

                nodeCache.current[key]!.scrollLeft = x;

                nodeCache.current[key]!.scrollTop = y;
//如果恢复成功，就取消
if (nodeCache.current[key]!.scrollLeft === x && nodeCache.current[key]!.scrollTop === y) {

                    shouldNextTick = false;

                    cancelRestoreFnCache.current[key]();

                }

            }

        },

        props.restoreInterval || 50,

        props.tryRestoreTimeout || 500

    );

},

至此，滚动恢复的组件全部完成。具体源代码可以到github查看，欢迎star。 github.com/confuciusth…

效果

总结

一个滚动恢复功能，如果想要健壮，完善地实现。其实需要掌握Router，Route相关的原理、history监听路由变化原理、React Effect的相关执行时机以及一个好的设计思路。而这些都需要我们平时不断的研究，不断的追求完美。虽然这并不能“加钱”，但这种能力以及追求是我们成为技术大牛的路途中，最宝贵的财富。当然，能够加钱最好了😍。

创作不易，欢迎点赞！