Javascript 如何检查元素是否显示或隐藏以防止溢出？

我有一个如下所示的navbar组件，其中包含一组选项卡，这些选项卡根据开发人员传入navbar.js的组件数量动态显示。如果选项卡的数量溢出，它将自动隐藏并从父div组件的固定宽度中切断。现在我想添加一个arrowLeft和arrowRight组件，让用户单击滚动以显示隐藏的选项卡。我该怎么办？我真的希望有一个不需要jquery的解决方案

Navbar.js

import React，{useState}来自“React”；
从“./Tab”导入选项卡；
从“./Filter”导入筛选器；
从“../styledComponents/StyledNavbar”导入{StyledTabs、NavbarOutline、arrowLeft、arrowRight}；
常量导航栏=（{value，tabFilter，contentFilter}）=>{
常量[activeTab，setActiveTab]=useState（值[0]。标题）；
const onClickTabItem=tab=>{
setActiveTab（tab）；
}
返回(
{value.map（子项=>{
const{title}=子对象；
返回；
})}
{tabFilter&！contentFilter&}
{contentFilter&！tabFilter&}
{value.map（子项=>{
if（child.title！==activeTab）返回未定义；
返回{child.title}
})}
);
}
导出默认导航栏；

StyledNavbar.js（样式化组件）

从“样式化组件”导入样式化；
导出常量navbroutline=styled.div`
左边距：35px；
右边距：35px；
溢出-x：自动；
空白：nowrap；
顶部：0px；
-ms溢出样式：无；/*Internet Explorer 10+*/
滚动条宽度：无；/*火狐*/
&：-webkit滚动条{
显示：无；/*Safari和Chrome*/
}
`;
export const StyledTabs=styled.button.attrs（props=>({
className:props.className，
}))`
&.不活跃{
字体风格：普通；
字体大小：正常；
字体大小：16px；
线高：20px；
列表样式：无；
填充：16px 31px 16px 31px；
背景：无；
边界：无；
边框底部：2px实心#e3；
z指数：-1；
}
&.主动{
字体风格：普通；
字体大小：正常；
字体大小：16px；
线高：20px；
列表样式：无；
边缘底部：-2px；
填充：16px 31px 16px 31px；
背景：无；
边界：无；
颜色：#2b8000；
边框底部：3px实心#2b8000；
z指数：-1；
}
&.内容{
列表样式：无；
背景：无；
边界：无；
左边距：35px；
右边距：35px；
}
&.过滤器{
字体风格：普通；
字体大小：正常；
字体大小：16px；
线高：20px；
列表样式：无；
位置：相对位置；
填充：16px 31px 16px 31px；
边界：无；
边框底部：2px实心#e3；
显示：块；
利润上限：-54px；
背景：白色；
右：0px；
}
`;

您正在寻找的称为intersectionObserver。有一个本机domapi，但我建议使用这个包。它得到了良好的维护和记录

您需要使用useInView钩子为要跟踪的每个DOM节点创建引用，并使用父组件作为它们的根。然后根据哪个refs'inView==true有条件地显示箭头

---

要滚动，您可以使用本机scrollIntoView（）API，也可以使用react包。

使用任何支持内联元素的旋转木马库。我不使用react，所以我不知道该推荐什么。大概