Question

我有一个bootstrap 3仪表板，我将溢出隐藏在特定的div中。我需要能够识别溢出中隐藏在div中不可见的表行数。 jQuery方法首选，但vanilla JS也很好。

一直试图对此进行排序，到目前为止还没有找到任何方法来计算溢出中隐藏的行数。

注意：可见的行与不可见的行之间没有标记差异，因为CSS用于在父DIV上使用overflow: hidden;隐藏多余的行。

感谢。

额外的＃1 这是我正在使用的HTML。高度由javscript在运行时设置。

＆＃13;

<div id="jobs-list" class="box-body no-padding job-list" style="overflow: hidden;">
    <table class="table">
        <tbody>
            <tr>
                <th>Account</th>
				<th class="text-center">Due</th>
			</tr>
			<tr>
				<td>
					Customer 1 (MCB#123456789)<br />
					<small>Job name</small>
				</td>
				<td class="text-center text-green">-- TODAY --</td>
			</tr>
			<tr>
				<td>
					Customer 2 (MCB#123456789)<br />
					<small>Job name</small>
				</td>
				<td class="text-center text-green">-- TODAY --</td>
			</tr>
			<tr>
				<td>
					Customer 3 (MCB#123456789)<br />
					<small>Job name</small>
				</td>
				<td class="text-center text-green">-- TODAY --</td>
			</tr>
			<tr>
				<td>
					Customer 4 (MCB#123456789)<br />
					<small>Job name</small>
				</td>
				<td class="text-center">-- TOMORROW --</td>
			</tr>
		</tbody>
	</table>
</div>
<div class="box-footer text-center">
	152 More Jobs
</div>

＆＃13;

正如您在上面的示例中所看到的，我使用bootstrap 3框来包含数据。 .box-body的高度是使用javascript设置的（它已经正常工作并且基于窗口高度）。通过使用overflow: hidden; CSS规则而不是在.box-body上显示滚动条，溢出被隐藏且不可见。我需要能够使用javascript调整.box-footer中的文字，以确定不可见的行数。

Answer 1

现在有一个解决这个问题的数学方法，假设所有孩子都有相同的高度（或宽度，取决于你的对齐）：

console.log($('#main div').length - $('#main').height()/$('#main div').height());

#main {
  height:200px; /*Suppose 200px*/
  overflow:hidden;
}
#main div {
  height:100px;
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div>
    Hello 1
  </div>
  <div>
    Hello 2
  </div>
  <div>
    Hello 3
  </div>
  <div>
    Hello 4
  </div>
  <div>
    Hello 5
  </div>
</div>

Answer 2

感谢所有答案......

我能够使用jQuery和Kevin Marx的jQuery扩展来找到一种方法。

首先，您需要将jquery.overflowing.js插件添加到页面中...

/* Overflowing.js
 *
 * A plugin based on Elving Rodriguez's Overflowed
 * http://elvingrodriguez.com/overflowed
 *
 */
(function($){
  $.fn.overflowing = function(options, callback){
    var self = this
    var overflowed = []
    var hasCallback = callback && typeof callback === 'function' ? true : false;
    var status = false
    this.options = options || window

    this.each(function(){
      var $this = $(this)
      elPosition = $this.position()
      elWidth = $this.width()
      elHeight = $this.height()
      var parents = $this.parentsUntil(self.options)
      var $parentsTo = $(self.options)
      parents.push($parentsTo)

      for(var i=0; i<parents.length; i++){
        var parentPosition = $(parents[i]).position()
        var parentWidth = $(parents[i]).width()
        var parentHeight = $(parents[i]).height()
        if ( elPosition.top<0
        || elPosition.left<0
        || elPosition.top>(parentHeight+parentPosition.top)
        || elPosition.left>(parentWidth+parentPosition.left)
        || (elPosition.top + elHeight) > (parentHeight+parentPosition.top)
        || (elPosition.left+elWidth) > (parentWidth+parentPosition.left)){
          status = true
          $(parents[i]).addClass('overflowed')
          overflowed.push(parents[i])
          if (hasCallback) callback(parents[i])
        }
      }

      if($this.parents(self.options).hasClass('overflowed')) $this.addClass('overflowing')
    })

    if (!hasCallback) return overflowed.length > 1 ? overflowed : status
  }

})(jQuery)

然后你跑......

$("tr").overflowing("#jobs-list");

通过溢出插件将类overflowing添加到目标父级（第二个选择器）中的每个溢出行（第一个选择器）。

此时，使用jQuery的.length属性和一个选择器来定位您想要计算的目标对象中的.overflowing类是一个简单的例子，即...

var hiddenRows = $("#jobs-list .overflowing").length;

Answer 3

我不确定你的意思是'隐藏溢出'。这是否意味着包含部分隐藏的内容或仅完全隐藏的内容？我的解决方案包括部分隐藏为“未隐藏”。

无论如何，offset是您最好的解决方案。

let jobs = $("#jobs-list");

let offset = jobs.offset().top;
let height = jobs.height();

let tr = $("tr", $("#jobs-list")).toArray();

let stopped = 0;

for (let i in tr)
{
  let total_offset = $(tr[i]).offset().top - offset;
  if (total_offset >= height)
  {
    stopped = i;
    break;
  }

}

console.log("hidden:", tr.length - stopped);

#jobs-list {
  height: 80px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jobs-list" class="box-body no-padding job-list" style="overflow: hidden;">
    <table class="table">
        <tbody>
            <tr>
                <th>Account</th>
				<th class="text-center">Due</th>
			</tr>
			<tr>
				<td>
					Customer 1 (MCB#123456789)<br />
					<small>Job name</small>
				</td>
				<td class="text-center text-green">-- TODAY --</td>
			</tr>
			<tr>
				<td>
					Customer 2 (MCB#123456789)<br />
					<small>Job name</small>
				</td>
				<td class="text-center text-green">-- TODAY --</td>
			</tr>
			<tr>
				<td>
					Customer 3 (MCB#123456789)<br />
					<small>Job name</small>
				</td>
				<td class="text-center text-green">-- TODAY --</td>
			</tr>
			<tr>
				<td>
					Customer 4 (MCB#123456789)<br />
					<small>Job name</small>
				</td>
				<td class="text-center">-- TOMORROW --</td>
			</tr>
		</tbody>
	</table>
</div>
<div class="box-footer text-center">
	152 More Jobs
</div>

Answer 4

找到了这个：Count List Items shown on screen and not overflow

使用jQuery示例：https://jsfiddle.net/Twisty/jzmqfeyj/

<强>的JavaScript

$(function() {
  //Add random count of jobs
  var i = 0;
  for (i = 0; i < Math.floor(Math.random() * 100); i++) {
    $("#jobs-list tbody").append($("#jobs-list table tbody tr:last").clone());
  }
  console.log("Created", i, "Jobs");
  console.log("Total", $("#jobs-list table tbody tr:not('.header')").length, "Jobs");
  var mh = $("#jobs-list").height();
  var overflowed = $("#jobs-list table tbody tr:not('.header')").filter(function() {
    return $(this).position().top + $(this).height() > mh;
  });
  console.log("Invisible", overflowed.length, "Jobs");
  $(".job-number").html(overflowed.length);
});

由于:visible仅计算hidden项，因此您无法真正使用它。我们.filter()可以查看我们＆＃34;视口中的项目＆＃34;或者没有溢出。我们知道每个元素和div的高度。任何大于div高度的东西，我们都算数。

使用Javascript计算隐藏在溢出中的表行

4 个答案: