javascript - 滚动到水平溢出的元素

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)，这将强制滚动条滚动到事件选项卡。