使用JavaScript滚动选项卡栏项

前提条件

我的应用程序上有一个选项卡栏，每个选项卡标签包括图标和文本。 用户可以通过点击选项卡在选项卡之间导航。触发边缘选项卡后，其他选项卡应向左或向右移动

---

预期结果

我希望它像一样工作

---

问题

我不知道在按下edge tab时如何使用纯JavaScript移动选项卡。还有谁能给我一些建议吗

---

请参见下面的代码片段：

函数clickHandler（e）{
设target=e.src元素| | e.target；
控制台日志（目标）；
}

.flex容器{
宽度：100%；
最小宽度：50rem；
身高：7雷姆；
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
背景：黑色；
溢出：隐藏；
}
.子菜单{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：7雷姆；
颜色：白色；
柔性生长：1；
最小宽度：22%；
}
.子菜单：活动{
颜色：灰色；
}
.菜单图标{
宽度：3.2rem；
高度：3.2rem；
文本对齐：居中；
}
.菜单标题{
身高：1.7雷姆；
宽度：7雷姆；
字号：1.2rem；
字体大小：粗体；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：正常；
文本对齐：居中；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

行动1
行动2
行动3
行动4
行动5
行动6
行动7
行动8
行动9
行动10

您可以尝试我的代码：

function clickHandler(el) {
   const rect = el.getBoundingClientRect()
   const winWidth = window.innerWidth || document.documentElement.clientWidth
   const widthScroll = winWidth * 33 / 100
   if (rect.left <= 0 + 10)
   {
        document.getElementById('main-menu').scrollLeft -= widthScroll ;
   }
   if (rect.right >= winWidth - 10)
   {
        document.getElementById('main-menu').scrollLeft += widthScroll ;
   }
 }

函数clickHandler（el）{
const rect=el.getBoundingClientRect（）
const winWidth=window.innerWidth | | document.documentElement.clientWidth
常量宽度滚动=winWidth*33/100
if（rect.left=winWidth-10）
{
document.getElementById（'main-menu'）.scrollLeft+=widthScroll；
}
}

这是演示链接

---

您可以在滚动时添加更多动画以获得效果

谢谢，但项目应该在左右两侧都被截断。您看到我的演示链接了吗？很抱歉，我没有解释清楚。当动作5被触发时，动作2也会一分为二。太简单了。您只需更改向左滚动的值（

widthScroll

variable）。重新检查我的编辑帖子

if（rect.left