React中如何实现仅指定容器滚动、不触发整页滚动？

你当前使用的scrollIntoViewAPI默认会遍历DOM树上所有层级的可滚动祖先元素，将所有滚动容器都调整到目标元素可见的位置，因此不仅固定高度的列表容器会滚动，外层页面的滚动容器也会被同步触发滚动，导致整页位置偏移。

放弃使用绑定在列表尾部元素上的scrollIntoView，改为直接操作列表容器自身的滚动属性，仅触发容器内部滚动，完全不会影响外层页面的位置：

• 将ref从尾部按钮/列表项，转移到外层固定高度的可滚动列表容器上
• 列表更新后，直接将容器的scrollTop设置为容器自身的scrollHeight，即可让容器内部滚动到底部
• 如果需要平滑滚动效果，给容器添加scroll-behavior: smooth样式即可，无需依赖scrollIntoView的配置参数

修正后的完整代码如下：

const Test = () => {
    const [num, setNum] = useState([0, 1, 2]);
    // ref绑定到外层可滚动容器
    const listContainerRef = useRef(null);

    useEffect(() => {
        const container = listContainerRef.current;
        if (!container) return;
        // 仅修改容器自身滚动位置，不会影响外层任何滚动容器
        container.scrollTop = container.scrollHeight;
    }, [num]);

    return (
        <div
            ref={listContainerRef}
            style={{
                overflow: "auto",
                width: "100%",
                height: 300,
                background: "green",
                flexDirection: "column",
                justifyContent: "flex-start",
                // 开启平滑滚动，不需要可以删掉
                scrollBehavior: "smooth"
            }}>
            {num.map((numer) => (
                <div key={numer} style={{ height: 20, margin: 2, color: "blue" }}>
                    {numer}
                </div>
            ))}
            <button
                onClick={() => {
                    setNum([...num, num.slice(-1)[0] + 1]);
                }}>
                Add number
            </button>
        </div>
    );
};

• 该方案直接操作目标容器的滚动属性，不会向上冒泡触发外层祖先滚动容器的行为，页面会始终保持在原有位置，只有列表容器自身滚动到底部
• 如果不需要平滑滚动效果，删除scrollBehavior: "smooth"即可，列表会直接跳转到底部，性能更优
• 不要尝试通过给scrollIntoView传不同配置参数修复问题，只要调用这个API，默认就会对齐所有层级的可滚动祖先，必然会影响外层页面的滚动位置

内容的提问来源于stack exchange，提问作者Alex V.