Question

有人可以建议我如何定义标签是否溢出以及如何滚动到该标签，从而它不会溢出？

下面的代码片段可视化问题。＆＃34;四＆＃34;选项卡是隐藏的，如果此选项卡处于活动状态，则用户将无法理解＆＃34;四＆＃34;选项卡在小型设备上选择。我目前正在使用AngularJS作为主要框架。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

滚动到水平溢出的元素

1 个答案: