显示/隐藏选项卡箭头以在溢出时导航其他选项卡

Question

现在，我的标签结构如下所示：

如您所见，当选项卡到达行尾时，它们将换行到下一行。我知道如何隐藏其他标签；但是，我想引入一个箭头系统，以在选项卡溢出时导航到其他选项卡。取决于屏幕分辨率，如下所示：

仅当隐藏了其他选项卡时，我才想显示箭头，这引出我的问题：如何检测选项卡何时包裹并插入箭头？

我需要它来处理响应式布局。

这是我用来创建标签的代码（注意：它包括箭头的硬编码列表项）：

<ul id="tabs" class="tab-links">
    <li class=""><a href="#tables">Tables &amp; Views</a></li>
    <li class=""><a href="#erd-tab" onclick="getERD()">ERD</a></li>
    <li class=""><a href="#left" class="gray-bg query-tab"><i class="fa fa-caret-left"></i></a></li>
    <li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
    <li class=""><a href="#query2" class="query-tab">Query 2</a></li>
    <li class=""><a href="#query3" class="query-tab">Query 3</a></li>
    <li class=""><a href="#query4" class="query-tab">Query 4</a></li>
    <li class=""><a href="#query5" class="query-tab">Query 5</a></li>
    <li class=""><a href="#query6" class="query-tab">Query 6</a></li>
    <li class=""><a href="#query7" class="query-tab">Query 7</a></li>
    <li class=""><a href="#query8" class="query-tab">Query 8</a></li>
    <li class=""><a href="#query9" class="query-tab">Query 9</a></li>
    <li class=""><a href="#right" class="gray-bg query-tab"><i class="fa fa-caret-right"></i></a></li>
    <!-- Hidden Tabs -->
    <li class=""><a href="#query10" class="query-tab">Query 10</a></li>
    <li class=""><a href="#query11" class="query-tab">Query 11</a></li>
    <li class=""><a href="#query12" class="query-tab">Query 12</a></li>
</ul>

Answer 1

要求的答案：

window.addEventListener('load', initTabs);

function initTabs() {
  var listContainer = document.getElementById('tabs');
  var buttonWidthCounter = 0;
  var totalContainerWidth = listContainer.offsetWidth;
  for (var i = 0; i < listContainer.children.length; i++) {
    if (buttonWidthCounter + listContainer.children[i].offsetWidth > totalContainerWidth) {
      //button overflow...add tab buttons
      console.log('there is overflow...add tab arrow buttons...');
    }
    buttonWidthCounter += listContainer.children[i].offsetWidth;

  }
}

li {
  display: inline-block;
}

<ul id="tabs" class="tab-links">
  <li class=""><a href="#tables">Tables &amp; Views</a></li>
  <li class=""><a href="#erd-tab" onclick="getERD()">ERD</a></li>
  <li class=""><a href="#left" class="gray-bg query-tab"><i class="fa fa-caret-left"></i></a></li>
  <li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
  <li class=""><a href="#query2" class="query-tab">Query 2</a></li>
  <li class=""><a href="#query3" class="query-tab">Query 3</a></li>
  <li class=""><a href="#query4" class="query-tab">Query 4</a></li>
  <li class=""><a href="#query5" class="query-tab">Query 5</a></li>
  <li class=""><a href="#query6" class="query-tab">Query 6</a></li>
  <li class=""><a href="#query7" class="query-tab">Query 7</a></li>
  <li class=""><a href="#query8" class="query-tab">Query 8</a></li>
  <li class=""><a href="#query9" class="query-tab">Query 9</a></li>
  <li class=""><a href="#right" class="gray-bg query-tab"><i class="fa fa-caret-right"></i></a></li>
  <!-- Hidden Tabs -->
  <li class=""><a href="#query10" class="query-tab">Query 10</a></li>
  <li class=""><a href="#query11" class="query-tab">Query 11</a></li>
  <li class=""><a href="#query12" class="query-tab">Query 12</a></li>
</ul>

我建议的答案：

滚动条更容易实现，并且可以说更好。

li{
display:inline-block;
}

ul{
white-space:nowrap;
}

html,body{
margin:0;
padding:0;
}

#container{
width:100vw;
overflow:scroll;
}

<div id="container">
<ul id="tabs" class="tab-links">
  <li class=""><a href="#tables">Tables &amp; Views</a></li>
  <li class=""><a href="#erd-tab" onclick="getERD()">ERD</a></li>
  <li class=""><a href="#left" class="gray-bg query-tab"><i class="fa fa-caret-left"></i></a></li>
  <li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
  <li class=""><a href="#query2" class="query-tab">Query 2</a></li>
  <li class=""><a href="#query3" class="query-tab">Query 3</a></li>
  <li class=""><a href="#query4" class="query-tab">Query 4</a></li>
  <li class=""><a href="#query5" class="query-tab">Query 5</a></li>
  <li class=""><a href="#query6" class="query-tab">Query 6</a></li>
  <li class=""><a href="#query7" class="query-tab">Query 7</a></li>
  <li class=""><a href="#query8" class="query-tab">Query 8</a></li>
  <li class=""><a href="#query9" class="query-tab">Query 9</a></li>
  <li class=""><a href="#right" class="gray-bg query-tab"><i class="fa fa-caret-right"></i></a></li>
  <!-- Hidden Tabs -->
  <li class=""><a href="#query10" class="query-tab">Query 10</a></li>
  <li class=""><a href="#query11" class="query-tab">Query 11</a></li>
  <li class=""><a href="#query12" class="query-tab">Query 12</a></li>
</ul>
</div>