滚动到水平溢出的元素

Question

谁能建议我如何定义选项卡是否溢出以及如何滚动到该选项卡，从而使其不溢出？

下面的代码片段将问题可视化。 “四个”选项卡处于隐藏状态，如果该选项卡处于活动状态，则用户不会知道在小型设备上选择了“四个”选项卡。 我目前正在使用AngularJS作为主要框架。

 .navigation { display: flex; margin: 10px 0; border: 1px solid red; border-radius: 5px; overflow-y: scroll; } .navigation > a { min-width: 200px; flex: 1; border-radius: 0; padding: 5px; text-align: center; cursor: pointer; text-decoration: none; } .navigation > a:not(:last-child) { border-right: 1px solid red; } .navigation > a:hover, .navigation > a:active { background-color: red; } 

 <div class='navigation'> <a>One</a> <a>Two</a> <a>Three</a> <a>Four</a> </div> 

Answer 1

我们可以首先确定活动选项卡并获取其偏移位置（从左侧开始），然后将该值应用于滚动（例如：使用jQuery scrollLeft），这将迫使滚动条滚动到活动选项卡。