如何在不强制布局或产生滚动闪烁的情况下恢复浏览器滚动位置？

问题描述 #

调用elem.scrollTo({ left, top, behavior: 'instant' })时，过早执行会强制触发布局（重排），过晚执行则会出现滚动闪烁问题。当前React组件实现中，scrollTo始终会强制触发布局，暂未找到合适解决方案。

注：以下核心代码未实现节流onScroll或保存至session storage等逻辑。

现有核心代码 #

React组件代码 #

import { useCallback, useLayoutEffect, useRef } from "react";
import { useLocation } from "react-router";
import './Scroller.css';

const scroll = new Map();

const Scroller = ({children}) => {
    const { pathname } = useLocation();
    const onScroll = useCallback(e => {
        const { target } = e;
        // FIXME throttle
        const { scrollLeft, scrollTop } = target;
        scroll.set(pathname, { scrollLeft, scrollTop });
    }, [pathname]);

    const ref = useRef(null);
    useLayoutEffect(() => {
        const state = scroll.get(pathname) ?? { scrollLeft: 0, scrollTop: 0 };
        const { scrollLeft: left, scrollTop: top } = state;
        ref.current.scrollTo({ left, top, behavior: 'instant' });
    }, [pathname]);
    return <div className="Scroller" onScroll={onScroll} ref={ref}>
               {children}
           </div>;
};

export default Scroller;

CSS样式代码 #

.Scroller {
    box-sizing: border-box;
    display: flow-root;
    contain: layout size style paint;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

.Scroller {
    padding-inline: 2em;
    padding-block: 2em;
}

可行优化方案 #

1. 直接设置scrollTop/scrollLeft属性 #

scrollTo方法在部分浏览器中会触发额外布局计算，直接设置DOM属性可减少不必要的强制布局，效果与scrollTo({behavior: 'instant'})一致：

useLayoutEffect(() => {
  const state = scroll.get(pathname) ?? { scrollLeft: 0, scrollTop: 0 };
  const elem = ref.current;
  if (elem) {
    elem.scrollLeft = state.scrollLeft;
    elem.scrollTop = state.scrollTop;
  }
}, [pathname]);

2. 优化执行时机，平衡闪烁与布局触发 #

改用useEffect结合requestAnimationFrame，确保在浏览器绘制周期内执行，减少闪烁风险，同时避免布局阶段的强制触发：

useEffect(() => {
  const state = scroll.get(pathname) ?? { scrollLeft: 0, scrollTop: 0 };
  const { scrollLeft: left, scrollTop: top } = state;
  const rafId = requestAnimationFrame(() => {
    const elem = ref.current;
    if (elem) {
      elem.scrollLeft = left;
      elem.scrollTop = top;
    }
  });
  return () => cancelAnimationFrame(rafId);
}, [pathname]);

3. 避免布局触发的前置操作 #

确保调用滚动恢复代码前，不要读取任何会触发重排的DOM属性（如offsetHeight、clientWidth等）。若必须读取，先批量完成读取操作，再执行滚动设置，减少重排次数。

4. 路由场景下禁用原生滚动恢复 #

针对React Router场景，禁用浏览器原生的scrollRestoration，避免与自定义滚动恢复逻辑冲突：

import { useHistory } from "react-router";

// 在组件内添加
const history = useHistory();
useEffect(() => {
  history.scrollRestoration = 'manual';
}, [history]);

总结 #

目前没有完全避免布局触发的完美方案，但通过直接设置DOM滚动属性、优化执行时机等方式，可以有效减少不必要的强制布局，平衡滚动闪烁与性能问题。建议根据目标浏览器环境和业务场景进行测试验证。

内容的提问来源于stack exchange，提问作者user990666