Scroll to horizontally overflowed element

Question

Could anyone suggest how I can define whether a tab is overflowed and how I can scroll to that tab, thus it become not overflowed?

The code snippet below visualizes the problem. The "Four" tab is hidden, and if this tab would be active, the user would have no clue that the "Four" tab is selected on a small device. I'm currently using AngularJS as main framework.

 .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），这将迫使滚动条滚动到活动选项卡。