Javascript 在滚动条显示之前，确定屏幕上可以看到多少表行

背景：我正在处理一个仪表板，仪表板下面显示一个标题和一个表格。该表可以有许多行（超过100行）

问题：大量行会触发一个垂直滚动条显示，该滚动条会隐藏其余行

可能的解决方案：我想旋转仪表板上每个屏幕上显示的表格行。我希望避免设置屏幕上可见的固定行数，而是在滚动条显示之前确定可以在屏幕上放置多少行。这意味着，首先，我想在滚动条显示之前确定屏幕上有多少行是可见的，然后创建一个旋转木马动画，在该动画中显示下一个X行，直到显示所有行并重置动画

使用的技术：React JS，引导表

---

对于carousel部分，我发现Bootstrap carousel可以正常工作，但问题是，屏幕上可以看到多少行。在滚动条显示之前，如何确定屏幕上可以显示多少行？多谢各位

一种可能的解决方案是：

在DOM中创建一个100%高度的元素（任何其他可能的高度也可以）。例如：

获取元素的高度

var availableHeight=document.getElementById（'row-wrapper'）.clientHeight

知道一行所占的高度只需除以可用高度，就可以知道要渲染多少行。如果您的行高为30：

---

var numberOfRows=数学楼层（可用高度/30）
这是一个如何填充div直到其满的示例。如果有人对此感兴趣，也会回答jQuery

我做了两个div。一个具有设置的高度（在本例中为100%，但也可以是静态高度），并且位于随内容增长的可增长div内

首先，它将填充可增长div，只要它小于content div。
最后添加的元素可能比剩余空间大。如果发生这种情况，它将删除最后一个元素

这也适用于具有动态高度的内容

注意：当使用while循环时，最好有一个备份计划来避免无限循环。因此，我添加了一个max records变量

Javascript:


window.onload=function（）{
document.getElementById（'fill'）。onclick=function（）{
var content=document.getElementById（'content'）；
var growtablewrapper=document.getElementById（'growtablewrapper'）；
var maxRecords=50；
而（（content.childNodes.length==0 | | parseInt（window.getComputedStyle（growtablewrapper.height）window.getComputedStyle（content.height&&GrowtableWrapper.childNodes.length>1）{
removeChild（GrowtableWrapper.childNodes[GrowtableWrapper.childNodes.length-1]）；
}
}
}
html，
身体，
#内容{
保证金：0；
填充：0；
身高：100%；
}
#填充，
#内容{
宽度：40%；
浮动：左；
}
#内容{
背景颜色：灰色；
溢出：隐藏；
}
#可生长包装{
背景颜色：浅灰色；
溢出：自动；
}

填满
我知道您标记了ReactJS，但一个好的基础是始终保持DOM尽可能小。我的策略是将数据保存在JavaScript中，只向DOM引入绝对需要的内容

下面是一个简单的示例，显示了10行的偏移量：


var dummyData=[]；
（函数populateData（）{
变量名称=[“格雷格”、“杰夫”、“鲍勃”、“布鲁斯”、“克拉克”、“戴安娜”]；
而（dummyData.length<100000）{
dummyData.push({
name:names[Math.floor（Math.random（）*names.length）]，
年龄：Math.floor（Math.random（）*100）
});
}
})();
功能显示数据（数据、偏移、限制）{
如果（偏移量===void 0）{
偏移量=0；
}
如果（限制===无效0）{
极限=数据长度；
}
var tbody=document.body.appendChild（document.createElement（“tbody”）；
对于（变量i=偏移；i<（限制+偏移）；i++）{
如果（i>=data.length）{
打破
}
var person=数据[i]；
var tr=tbody.appendChild（document.createElement（“tr”））；
tr.innerHTML=“+i+”“+person.name+”“+person.age+”；
}
返回tbody；
}
var pagesize=10；
var偏移=0；
var offsetInput=document.body.appendChild（document.createElement（“输入”））；
offsetInput.type=“编号”；
offsetInput.min=“0”；
offsetInput.value=“0”；
var table=document.body.appendChild（document.createElement（“table”）；
table.style.width=“100%”；
table.innerHTML=“IndexNameAge”；
var tbody=table.appendChild（displayData（dummyData，offset，pagesize））；
函数更新（）{
if（offsetInput.validity.valid）{
offset=parseInt（offsetInput.value，10）；
表2.移除儿童（t身体）；
tbody=显示数据（dummyData、偏移量、页面大小）；
表3.儿童（t身体）；
}
}
offsetInput.addEventListener（“更改”，更新）；
offsetInput.addEventListener（“键控”，更新）我正在使用React和following。wrapper元素的clientHeight变量是整个网站的高度，即所有行和标题，即使我将其高度设置为100%。如何仅获取屏幕上可见内容的高度？在元素上设置overflow:hidden，此外，在用行弹出元素之前进行计算。谢谢大家的帮助。我发现
window.innerHeight
效果最好。在得到wi的高度后