javascript - 通过 overflow hidden 统计隐藏元素的个数

Question

我有一个带有重复元素的全宽 div。溢出时，我 overflow hidden 的内容并且不显示空白。我的问题是我想计算隐藏项(或我猜显示的项)的数量，但不知道如何计算。

您可以在 https://codepen.io/joshuaohana/pen/aqPJMr 上看到一个基本示例

在这种情况下，控制隐藏的 css 是

div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

如果你删除溢出线你会得到一个滚动条，把它放回去，没有滚动条。

当溢出设置为隐藏时，我需要一种方法来计算丢失的溢出部分中隐藏的元素。

我发现的唯一事情是尝试计算哪些元素已隐藏，但这不适用于溢出项。我找不到任何可以搜索的不同限定词。

Answer 1

这是 jQuery 的一种方法。检测包含 div 的宽度。然后使用 offset() 方法计算 left 坐标超出此宽度的元素数。

var parentContainerWidth = $("div").width();
var elementCount = $('span').filter(function() {
  return $(this).offset().left >= parentContainerWidth;
}).length;
alert(elementCount);

div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

span {
  background: pink;
  margin: 2px;
  padding: 1rem;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>here is an item 1</span>
  <span>here is an item 2</span>
  <span>here is an item 3</span>
  <span>here is an item 4</span>
  <span>here is an item 5</span>
  <span>here is an item 6</span>
  <span>here is an item 7</span>
  <span>here is an item 8</span>
  <span>here is an item 9</span>
  <span>here is an item 10</span>
  <span>here is an item 11</span>
  <span>here is an item 12</span>
  <span>here is an item 13</span>
  <span>here is an item 14</span>
  <span>here is an item 15</span>
  <span>here is an item 16</span>
  <span>here is an item 17</span>
  <span>here is an item 18</span>
  <span>here is an item 19</span>
  <span>here is an item 20</span>
  <span>here is an item 21</span>
  <span>here is an item 22</span>
  <span>here is an item 23</span>
  <span>here is an item 24</span>
</div>