gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:59:32 26 4
gpt4 key购买 nike

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

例如:

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

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

当行数超过表格的高度时没关系: enter image description here

但如果不是... enter image description here

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>

最佳答案

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

关于javascript - 如何创建一个函数来检测我的可滚动 tbody 何时溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31541257/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com