Css 焦点上显示溢出的内容

我在flex容器中有一组项目。同时只有一定数量的项目可见。其余部分隐藏在父对象的溢出中。我可以左右移动flex容器元素以显示/隐藏不同的项目。我遇到的问题是，如果您在项目中使用tab键（即，使用键盘上的“tab”键），flex容器会自动移动，从而使焦点项目可见。即使flex容器的

左

位置固定，也会发生这种情况。更奇怪的是，如果在flex容器由于选项卡焦点而“移动”后更改左位置，它将保持偏移量

下面我举一个例子。您将看到只有项目2、3、4可见。但是，如果您在项目中进行制表，项目#5将可见，然后是#6，等等。但这不会发生相反的情况（项目#1即使成为焦点，也永远不会可见）

我想flex容器可能正在滚动，所以我尝试在flex容器上设置

overflow:hidden

（不仅仅是在容器的父容器上）。这并没有解决问题

关于如何防止flex容器在其子对象成为焦点时发生移动，有什么想法吗

这发生在Chrome和Firefox中

我无法禁用对项目的关注，因为我希望它可以访问

编辑：正如ZohirSalak在下面所指出的，问题是当您在项目中使用tab键时，其中一个元素会滚动。奇怪的是它是

.track-outer

元素，而不是

.track-inner

。奇怪的是，设置

.track outer

的宽度并将overflow设置为hidden，它仍然可以滚动。没有滚动条，你不能用滚轮来滚动

a{
显示：块；
高度：100px；
flex:0100px；
边框：2倍纯绿；
填充：10px；
利润率：0.10px；
}
.轨道外侧{
宽度：400px；
溢出：隐藏；
边框：2件纯蓝；
填充：20px；
}
.轨道内侧{
显示器：flex；
位置：相对位置；
左：-160px；
}

---

这里有一个解决方案。您基本上是在

上监听滚动事件。track outer

并将其滚动设置为零。您不需要限制scroll事件，因为似乎只有通过tab键才能触发它。也许不太理想，但似乎有效

const el=document.querySelector（“.track outer”）
el.addEventListener（'scroll'，（）=>{
el.L左=0
});
a{
显示：块；
高度：100px；
flex:0100px；
边框：2倍纯绿；
填充：10px；
利润率：0.10px；
}
.轨道外侧{
宽度：400px；
溢出：隐藏；
边框：2件纯蓝；
填充：20px；
}
.轨道内侧{
显示器：flex；
位置：相对位置；
左：-160px；
}

当您使用
选项卡键在元素之间跳转时，滚动条的移动与
left
属性无关，元素以
left:-160px开始，这就是它返回的位置，这不是实现自定义滚动的最佳方式behavior@ZohirSalak我并不是真的试图实现滚动本身。有没有办法关闭flex容器的滚动？我原以为设置
溢出：hidden
可以做到这一点，但显然不行。您可以在所有
元素上使用
tabindex=“-1”
禁用制表，除此之外，我不太清楚sure@ZohirSalak是的，我在帖子里提到过。我不能这样做，因为它是无法访问的。不过，谢谢你看一看！我假设您使用Js来移动项目，当您这样做时，您可以为隐藏元素
-1
和其他元素提供正常的选项卡索引顺序