滚动到水平溢出的元素

Question

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

下面的代码片段形象化了这个问题。 "Four" 选项卡是隐藏的，如果此选项卡处于活动状态，用户将不知道在小型设备上选择了 "Four" 选项卡。我目前使用 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），这将强制滚动条滚动到活动标签。

滚动到水平溢出的元素

Scroll to horizontally overflowed element

javascript

css

overflow

angularjs