通过溢出隐藏计数隐藏元素的数量

Question

我有一个重复元素的全宽div。 溢出时，我隐藏了溢出的内容，但不显示白色。 我的问题是我想计算隐藏项目（或我猜显示的项目）的数量，但无法弄清楚该怎么做。

您可以在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>