javascript - Count number of hidden elements by overflow hidden - Stack Overflow

admin管理员组

文章数量:1406156

I have a full width div with a repeating element. On overflow, I hide the overflown content and don't display whitepace. My problem is I want to count the number of hidden items (or displayed items I guess) but cannot figure out how to.

You can see a basic example of this at

In this case the css governing the hiding is

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

If you remove the overflow line you get a scroll bar, put it back in, no scroll bar.

What I need is a way to count the items that are hidden in the lost overflow section, when overflow is set to hidden.

The only things I've found are trying to count which elements have hidden, but that doesn't apply to overflow items. I can't find any differing qualifiers that I can search against.

I have a full width div with a repeating element. On overflow, I hide the overflown content and don't display whitepace. My problem is I want to count the number of hidden items (or displayed items I guess) but cannot figure out how to.

You can see a basic example of this at https://codepen.io/joshuaohana/pen/aqPJMr

In this case the css governing the hiding is

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

If you remove the overflow line you get a scroll bar, put it back in, no scroll bar.

What I need is a way to count the items that are hidden in the lost overflow section, when overflow is set to hidden.

The only things I've found are trying to count which elements have hidden, but that doesn't apply to overflow items. I can't find any differing qualifiers that I can search against.

• javascript
• css

Share Improve this question Follow asked Feb 28, 2018 at 2:29 Joshua OhanaJoshua Ohana 6,1411515 gold badges6464 silver badges121121 bronze badges 2

• Can you use jQuery? – sol Commented Feb 28, 2018 at 2:37
• @sol Yes jQuery is fine – Joshua Ohana Commented Feb 28, 2018 at 2:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This is an approach with jQuery. Detect the width of the containing div. Then use the offset() method to count the number of elements who have a left coordinate outside of this width.

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./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>

本文标签： javascriptCount number of hidden elements by overflow hiddenStack Overflow