javascript - 如何创建一个函数来检测我的可滚动 tbody 何时溢出？

Question

我* 创建了一个可滚动表，它只向上滚动它的 tbody 但其余部分保持固定，这就是它应该的样子，但是，当 tbody 不够大时我使滚动条远离 tbody 的小技巧，因为它会造成困惑。 我如何创建一个函数来检测它(td 行)何时溢出表格的大小(假设其高度为 100%)，以便我可以更改表格的设置.

例如:

function detector(){
  if(table.overflow-y:is_on){
    //bla
  }
} 

*我们实际上是 StackOverflow 社区和我，谢谢!长寿和繁荣。

当行数超过表格的高度时没关系:

但如果不是...

th, td {
  word -
    break: break -all;
}
html {
  width: 100 % ;
  height: 100 % ;
  overflow: hidden;
}

body {
  background: #FFF;
  color: #000;font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;margin: 10px;	padding: 0;}

table, td, a {color: # 000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans - serif
}
h1 {
  font: normal normal 18px Verdana,
  Geneva,
  Arial,
  Helvetica,
  sans - serif;
  margin: 0 0 5px 0
}
div.tableContainer {
  clear: both;
  border: 1px solid #963;padding-right:1px;height: 285px;overflow: auto;width: 100%;}

html>body div.tableContainer {overflow: hidden;width: 100%;height:83%;}
div.tableContainer table {float: left;width: 100%;height:100%;}


html>body div.tableContainer table {
	width: calc(100% - 16px);
    height:100%;
}


thead.fixedHeader tr {
	position: relative
}

html>body thead.fixedHeader tr {
	display: block
}

thead.fixedHeader th {
	background: # C96;
  border - left: 1px solid# EB8;
  border - right: 1px solid# B74;
  border - top: 1px solid# EB8;
  font - weight: normal;
  padding: 4px 3px;
  text - align: left;
}

thead.fixedHeader a, thead.fixedHeader a: link, thead.fixedHeader a: visited {
  color: #FFF;
  display: block;
  text - decoration: none;
  width: 100 % ;

}

thead.fixedHeader a: hover {
  color: #FFF;
  display: block;
  text - decoration: underline;
  width: 100 % ;
}

html > body tbody.scrollContent {
  display: block;
  overflow: auto;
  width: 100 % ;
  height: 100 % ;
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border - bottom: none;
  border - left: none;
  border - right: 1px solid# CCC;
  border - top: 1px solid# DDD;
  padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
  background: #EEE;
  border - bottom: none;
  border - left: none;
  border - right: 1px solid# CCC;
  border - top: 1px solid# DDD;
  padding: 2px 3px 3px 4px
}

.scrollTable, .scrollContent {
  overflow: visible;
}

html > body tbody.scrollContent {
  width: calc(100 % +17px);
}

th,
td {
  word-break: break-all;
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background: #FFF;
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 10px;
  padding: 0;
}
table,
td,
a {
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
  font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 0 0 5px 0
}
div.tableContainer {
  clear: both;
  border: 1px solid #963;
  padding-right: 1px;
  height: 285px;
  overflow: auto;
  width: 100%;
}
html>body div.tableContainer {
  overflow: hidden;
  width: 100%;
  height: 83%;
}
div.tableContainer table {
  float: left;
  width: 100%;
  height: 100%;
}
html>body div.tableContainer table {
  width: calc(100% - 16px);
  height: 300px;
}
thead.fixedHeader tr {
  position: relative
}
html>body thead.fixedHeader tr {
  display: block
}
thead.fixedHeader th {
  background: #C96;
  border-left: 1px solid #EB8;
  border-right: 1px solid #B74;
  border-top: 1px solid #EB8;
  font-weight: normal;
  padding: 4px 3px;
  text-align: left;
}
thead.fixedHeader a,
thead.fixedHeader a:link,
thead.fixedHeader a:visited {
  color: #FFF;
  display: block;
  text-decoration: none;
  width: 100%;
}
thead.fixedHeader a:hover {
  color: #FFF;
  display: block;
  text-decoration: underline;
  width: 100%;
}
html>body tbody.scrollContent {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100%;
}
/* make TD elements pretty. Provide alternating classes for striping the table */

/* http://www.alistapart.com/articles/zebratables/                             */

tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
  background: #EEE;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
.scrollTable,
.scrollContent {
  overflow: visible;
}
html>body tbody.scrollContent {
  width: calc(100% + 17px);
}

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Pure CSS Scrollable Table with Fixed Header</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="language" content="en-us">

  <style type="text/css"></style>
</head>

<body>

  <h1>Pure CSS Scrollable Table with Fixed Header</h1>


  <div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable" id="Stable">
      <thead class="fixedHeader">
        <tr class="alternateRow">
          <th><a href="#">Header 1ahjsgdhjagsdhjgahjsdghjasgdhjagshjdgahjsdghjagsdhj</a>
          </th>
          <th><a href="#">Header 2</a>
          </th>
          <th><a href="#">Header 3</a>
          </th>
          <th><a href="#">Header 2</a>
          </th>
          <th><a href="#">Header 3</a>
          </th>
          <th><a href="#">Header 2</a>
          </th>
          <th><a href="#">Header 3</a>
          </th>
        </tr>
      </thead>
      <tbody class="scrollContent">
        <tr class="normalRow">
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div>
    <br>
  </div>



</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span>

</html>

Answer 1

var tbody = $('.scrollContent'),
    theader = $('.fixedHeader'),
    table = $('#Stable');

console.log(tbody[0].scrollHeight);
console.log(theader.height());
console.log(table.height());

if(table.height() - theader.height() < tbody[0].scrollHeight){
  console.log('Overflowed height of table');
} else {
  console.log('Did not overflow.');
}

我相信这就是您要找的。它使用 jQuery，但如果您愿意，可以将其转换为原始 Javascript。

tbody[0].scrollHeight 给出了 tbody 的实际高度。因此，如果这大于表格的高度 - 标题的高度，则会创建一个滚动条。

http://plnkr.co/edit/pSvM6S0HbEfIwMyo2NbQ?p=preview