React实现动态增宽元素滚动时内容跳动、移动不自然问题

向左滚动触发前置插入元素时，浏览器默认会保持scrollLeft属性值不变，但在容器最左侧插入新元素会让整个内容区宽度增加，原本的视口位置会被新插入的元素顶到最左侧，直接表现为视口跳回scrollLeft = 0的位置，用户看到内容突然跳变，没法连续向左滚动。
向右滚动追加元素不会有这个问题，因为追加的元素在内容尾部，不会影响当前视口之前的内容布局，scrollLeft对应的视口位置不会发生偏移。

核心逻辑非常简单：在前置插入元素完成DOM更新后，手动给scrollLeft加上新插入元素的总宽度，把视口位置修正回插入前用户正在看的位置。
之前提前修改滚动位置出问题，本质是修改时DOM还没完成更新，新元素还没插入到文档流，计算的偏移量完全不准。
具体实现只需要两步：

• 前置插入元素前，先记录当前容器的scrollLeft值
• DOM更新完成后（React里优先用useLayoutEffect避免视觉闪屏），给容器的scrollLeft加上新插入内容的总宽度，修正偏移量

import React, { useEffect, useState, useLayoutEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';

function Test() {
  const [span, setSpan] = useState<Array<number>>([-1, 0, 1]);
  const containerRef = useRef<HTMLDivElement>(null);
  // 标记是否是前置插入触发的更新，用来做滚动修正
  const isPrependingRef = useRef(false);
  // 记录前置插入前的scrollLeft值
  const prevScrollLeftRef = useRef(0);
  const ITEM_WIDTH = window.innerWidth * 0.4; // 和样式里设置的minWidth:40vw对应

  // 向右滚动追加元素
  const append = () => {
    setSpan([
      ...span,
      span[span.length - 1] + 1,
    ]);
  };

  // 向左滚动前置插入元素
  const prepend = () => {
    const container = containerRef.current;
    if (container) {
      // 插入前先记录当前滚动位置，打更新标记
      prevScrollLeftRef.current = container.scrollLeft;
      isPrependingRef.current = true;
    }
    setSpan([
      span[0] - 1,
      ...span,
    ]);
  };

  // DOM更新后、浏览器绘制前修正滚动位置，完全无闪屏
  useLayoutEffect(() => {
    const container = containerRef.current;
    if (container && isPrependingRef.current) {
      // 新增1个固定宽度元素，直接给scrollLeft加上对应宽度即可
      container.scrollLeft = prevScrollLeftRef.current + ITEM_WIDTH;
      isPrependingRef.current = false;
    }
  }, [span]);

  // 初次加载居中到0号元素
  useEffect(() => {
    const element = document.getElementById('element-0');
    if (element) {
      element.scrollIntoView({ behavior: 'auto', inline: 'center' });
    }
  }, []);

  // 绑定滚动监听
  useEffect(() => {
    const element = containerRef.current;
    const scrolling = () => {
      if (element) {
        // 留20px触发阈值，避免刚好卡0位重复触发死循环
        if (element.scrollLeft < 20) {
          prepend();
        }
        if (element.offsetWidth + element.scrollLeft >= (element.scrollWidth - 100)) {
          append();
        }
      }
    };
    element.addEventListener('scroll', scrolling);
    return () => {
      element.removeEventListener('scroll', scrolling);
    };
  }, [span.length]);

  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}
    >
      <div
        id="container"
        ref={containerRef}
        style={{
          maxWidth: '50vw', maxHeight: '50vh', overflowX: 'auto', whiteSpace: 'nowrap', backgroundColor: 'red',
        }}
      >
        <div style={{ width: 'fit-content' }}>
          <div style={{ width: 'fit-content' }}>
            <div style={{ display: 'flex' }}>
              {span.map((element) => (
                <div key={`element-${element}`} id={`element-${element}`} style={{ minWidth: '40vw', minHeight: '100vh', border: '1px solid black' }}>
                  { element }
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
  <React.StrictMode>
    <Test />
  </React.StrictMode>
);

• 用useLayoutEffect而不是普通useEffect做滚动修正，它会在DOM更新后、浏览器绘制页面之前执行，用户完全看不到滚动跳变的过程
• 不要在插入元素前直接修改scrollLeft，这时候DOM还没更新，修改的偏移量会被后续DOM结构变化打乱，必然出现位置错乱
• 原来判断scrollLeft === 0太严格，改成小于一个小阈值（比如20px）就触发前置加载，体验更顺滑，也能避免修正后刚好卡在0的位置重复触发加载死循环
• 如果你的列表项宽度不固定，只需要在插入前记录container.scrollWidth，插入后用新的scrollWidth减去之前记录的scrollWidth，就能得到新增的总宽度，不用硬编码元素宽度，适配任意尺寸的列表项

这个方案是日历、甘特图这类无限双向滚动组件的通用实现逻辑，没有复杂依赖，性能开销可以忽略。

内容的提问来源于stack exchange，提问作者T. Maxx