React中如何让scrollIntoView()仅在指定div容器内滚动不影响整个页面

问题描述 #

我有一个包含多个元素的容器（如下图所示），我希望点击任意元素时，该元素能定位到容器的中心可视区域。

^{我需要在其中滚动到指定元素的容器}

目前我为所有元素维护了一个ref数组，点击元素时会调用scrollIntoView()方法，代码如下：

itemsRef.current[curVideoPos]?.scrollIntoView({
    block: "center",
    inline: "nearest",
});

该滚动功能的效果基本符合预期，但唯一的问题是执行时整个页面也会跟着滚动。请问我需要如何调整，才能让scrollIntoView()仅在指定容器内滚动，不会触发整个页面的滚动？

解决方案 #

出现这个问题的原因是scrollIntoView默认会递归滚动所有可滚动的祖先元素，直到目标元素在浏览器视口内可见，因此会连带触发页面层级的滚动。你可以按下面两种方案调整：

方案1：新增containment参数（适合不需要兼容老旧浏览器的场景）

W3C最新的ScrollIntoViewOptions规范支持配置containment: "self"，指定后仅会滚动目标元素的最近可滚动祖先容器，不会触发更外层的滚动，修改后的代码如下：

itemsRef.current[curVideoPos]?.scrollIntoView({
    block: "center",
    inline: "nearest",
    containment: "self"
});

该属性兼容性为Chrome 110+、Firefox 110+、Safari 15.4+，覆盖当前绝大多数主流用户场景。

方案2：手动计算容器滚动偏移（全兼容方案）

如果需要兼容更低版本的浏览器，可以自己计算滚动位置，直接操作目标容器的滚动值，完全不会影响外层页面：

1. 先给你要滚动的容器绑定一个ref，例如命名为containerRef
2. 点击元素时用以下代码替换原scrollIntoView逻辑：

const container = containerRef.current;
const targetEl = itemsRef.current[curVideoPos];
if (!container || !targetEl) return;

// 计算相对位置
const containerRect = container.getBoundingClientRect();
const targetRect = targetEl.getBoundingClientRect();
// 垂直方向中心偏移
const scrollTopOffset = targetRect.top - containerRect.top + targetRect.height / 2 - containerRect.height / 2;
// 水平方向中心偏移（不需要水平滚动可以删掉）
const scrollLeftOffset = targetRect.left - containerRect.left + targetRect.width / 2 - containerRect.width / 2;

container.scrollTo({
    top: container.scrollTop + scrollTopOffset,
    left: container.scrollLeft + scrollLeftOffset,
    behavior: "smooth" // 不需要平滑滚动可以移除
});

如果容器有额外的padding、边框样式，可以根据实际场景微调偏移值，保证定位精度。

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