首先给父div提供以下规则。

#tab {
    display: flex;
    overflow: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }

scroll-snap-type使其中一个选项卡必须始终位于视口上。
现在给所有的孩子们制定以下规则。

#tab > * {
    flex-shrink: 0;
    width: 100%;
    scroll-snap-align: start;
    scroll-margin-top: 1rem;

    padding: 1rem 0.4rem;
  }

挠曲收缩：0将更改flex子级的默认行为并阻止其收缩。scroll-snap-align告诉子级滚动行为的对齐位置。scroll-margin-top将在滚动时在顶部保留边距。
现在对js做一点修改。

const btn = [].slice.call(document.getElementsByTagName("button"));
btn.forEach((item, index) => {
  item.addEventListener("click", function () {
    document.getElementById("tab").children[index].scrollIntoView();
  });
});

scrollIntoView（）将任何元素滚动到视区（如果尚未进入视区）。
这样你也可以在移动的上执行触摸滚动。现在结合所有的法术你得到你所要求的。
第一个