如何实现Carbon Design System content switcher的横向滚动？

针对不想大规模重构现有tabs组件、仅需补充横向滚动能力的场景，以下两个方案均不会破坏原有响应式特性，改造成本极低：

方案1：纯CSS实现（零JS改动，优先推荐短期使用） #

仅需要给content switcher相关容器追加样式即可生效，完全不触碰原有组件逻辑：

/* content switcher外层容器样式 */
.content-switcher-wrapper {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* 隐藏滚动条同时保留滚动能力，兼容全平台浏览器 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.content-switcher-wrapper::-webkit-scrollbar {
  display: none;
}
/* 单个选项样式适配 */
.switcher-item {
  flex-shrink: 0;
  scroll-snap-align: start;
}

• 优势：原有响应式断点、选中态、切换逻辑完全不受影响，后续要替换原生支持横向滚动的tabs组件时，直接删除新增样式即可，无迁移成本。

方案2：补充极少量JS增强交互体验 #

如果需要增加左右滚动按钮引导用户操作，可以额外补充少量逻辑，代码量不超过15行：

const switcherWrapper = document.querySelector('.content-switcher-wrapper')
// 仅当内容溢出时才显示滚动按钮
const checkOverflow = () => {
  const isOverflow = switcherWrapper.scrollWidth > switcherWrapper.clientWidth
  document.querySelector('.scroll-btn-group').style.display = isOverflow ? 'flex' : 'none'
}
window.addEventListener('resize', checkOverflow)
checkOverflow()

// 绑定滚动按钮事件
document.querySelector('.scroll-left').addEventListener('click', () => {
  switcherWrapper.scrollBy({ left: -220, behavior: 'smooth' })
})
document.querySelector('.scroll-right').addEventListener('click', () => {
  switcherWrapper.scrollBy({ left: 220, behavior: 'smooth' })
})

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