如何确保滚动后tabs div内起始按钮完全可见？

这个问题我之前做项目时也碰到过，核心痛点就是固定像素滚动容易导致按钮被截断，咱们换个思路——不固定滚动像素，而是找到需要完全显示的目标按钮，计算它的偏移量来精准滚动，不管按钮数量多少、宽度是否一致都能生效，具体步骤如下：

1. 先判断是否需要滚动 #

首先先排除不需要滚动的情况：如果Tabs容器的总宽度（scrollWidth）小于等于可视宽度（clientWidth），说明所有按钮都能完全放下，直接跳过逻辑即可：

const tabsContainer = document.querySelector('.tabs');
if (tabsContainer.scrollWidth <= tabsContainer.clientWidth) {
  return;
}

2. 找到当前部分可见的起始按钮 #

遍历所有Tab按钮，通过getBoundingClientRect()判断哪个按钮是当前可视区边缘被截断的那个：

const buttons = tabsContainer.querySelectorAll('.tab-button');
let targetBtn = null;
const containerRect = tabsContainer.getBoundingClientRect();

for (const btn of buttons) {
  const btnRect = btn.getBoundingClientRect();
  // 两种情况：按钮左边被容器挡住，或者按钮右边超出容器（部分可见）
  if (btnRect.left < containerRect.left || (btnRect.left >= containerRect.left && btnRect.right > containerRect.right)) {
    targetBtn = btn;
    break;
  }
}

3. 精准滚动到目标按钮的起始位置 #

找到目标按钮后，计算它相对于Tabs容器的左侧偏移量，然后设置容器的scrollLeft，让按钮的左边缘完全对齐容器的左边缘：

if (targetBtn) {
  // 获取按钮相对于容器的左侧偏移
  const targetOffset = targetBtn.offsetLeft;
  // 直接滚动（如果需要平滑动画，用scrollTo的behavior参数）
  tabsContainer.scrollLeft = targetOffset;
  
  // 平滑滚动版本：
  // tabsContainer.scrollTo({
  //   left: targetOffset,
  //   behavior: 'smooth'
  // });
}

补充说明 #

• 如果是点击左滚动按钮的场景，可能需要调整判断逻辑：找当前可视区内第一个完全可见按钮的前一个按钮，然后滚动到它的偏移量，确保它完全进入可视区。
• 要是按钮宽度不固定，这个方法依然有效，因为我们是基于每个按钮的实际偏移量来计算的，不是固定像素值。

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