JavaScript实现点击元素时父容器横向滚动到指定子Div

原代码的核心问题是用了视口相对位置计算滚动值，导致定位偏差，调整后的代码如下：

tabsChanged = (tabIndex: any) => {
  const gparent = document.querySelector("div[data-testid='tabslistMenu']");
  if (gparent) {
    const parent = gparent.querySelector("div[role='tablist']") as HTMLElement;
    const child = document.getElementById("default-tabs-" + tabIndex);
    if (child && parent) {
      // 获取子元素相对于父容器的左侧偏移量
      const childOffsetLeft = child.offsetLeft;
      // 计算目标滚动位置：子元素偏移量减去预设左侧留白
      const targetScrollLeft = childOffsetLeft - 40;
      parent.scrollTo({
        left: targetScrollLeft,
        behavior: "smooth",
      });
    }
  }
}

关键修改说明 #

• 替换getBoundingClientRect().left为child.offsetLeft：offsetLeft直接返回子元素相对于父容器的左侧距离，不受视口位置影响，计算更精准。
• 补充类型断言：给parent加上HTMLElement类型断言，避免类型报错。
• 变量声明优化：用const声明无需重新赋值的变量，代码更严谨。

如果需要让子元素居中对齐父容器，可调整滚动位置计算逻辑：

// 居中对齐的计算方式
const targetScrollLeft = childOffsetLeft + child.offsetWidth / 2 - parent.offsetWidth / 2;

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