如何在VueJS中实现类似YouTube的标签（芯片条）滑块效果？

可直接使用的现成方案 #

• React技术栈：用react-horizontal-scrolling-menu，完全匹配你要的YouTube芯片栏效果，已经封装好了前后按钮控制滚动、滚动位置自动对齐、移动端触摸滑动、自定义样式等全部功能，自带的Demo改改样式就能上线，不需要自己处理滚动边界、流畅度适配这类坑。
• Vue技术栈：可以直接用vue-horizontal-scroll库，也可以直接用Element Plus、Ant Design Vue自带的Tabs组件改造，把Tabs的标签样式改成芯片样式就行，自带的左右切换按钮功能直接复用，只需要改几行CSS就能达标。
• 原生JS/无框架场景：用scrollbooster这个轻量库，体积不到3KB，支持横向滚动、按钮控制、拖拽滑动，所有边界判断都已经做好，自己写个芯片列表的DOM结构套上就行。

如果不想引入额外依赖，用原生API实现也非常简单：给滚动容器加scroll-behavior: smooth的CSS属性，点击前后按钮的时候直接修改容器的scrollLeft值就行，主流浏览器全部支持，不需要处理复杂逻辑。

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