Javascript 如何在没有内容的情况下设置滚动条大小

我正在尝试创建一个数据网格，在该网格中，我不会在开始时显示所有记录，而是希望在滚动时呈现这些记录。是否有一种方法可以根据我拥有的数据量设置一个滚动大小，并在用户滚动时更改dev中的数据

我知道有网格的存在，但我不想使用它们，我想知道有什么不同的方式来做到这一点

我已尝试查看滚动事件，但没有找到有关滚动方向或当前偏移量的任何信息。我能找到什么文件吗。甚至搜索一个技术名称也会对我有所帮助。

您可以使用javascript和html搜索“无限滚动”。
You can search for a "infinity scroll" with javascript and html.

EXAMPLE HTML: `<ul id='infinite-list'></ul>`
EXAMPLE CSS: `#infinite-list {
  /* We need to limit the height and show a scrollbar */
  width: 200px;
  height: 300px;
  overflow: auto;

  /* Optional, only to check that it works with margin/padding */
  margin: 30px;
  padding: 20px;
  border: 10px solid black;
}

/* Optional eye candy below: */
li {
  padding: 10px;
  list-style-type: none;
}
li:hover {
  background: #ccc;
}`

EXAMPLE JAVASCRIPT: `var listElm = document.querySelector('#infinite-list');

// Add 20 items.
var nextItem = 1;
var loadMore = function() {
  for (var i = 0; i < 20; i++) {
    var item = document.createElement('li');
    item.innerText = 'Item ' + nextItem++;
    listElm.appendChild(item);
  }
}

// Detect when scrolled to bottom.
listElm.addEventListener('scroll', function() {
  if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
    loadMore();
  }
});

// Initially load some items.
loadMore();
`

HTML示例：`
`
CSS示例：`#无限列表{
/*我们需要限制高度并显示滚动条*/
宽度：200px；
高度：300px；
溢出：自动；
/*可选，仅用于检查它是否适用于边距/填充*/
利润率：30像素；
填充：20px；
边框：10px纯黑；
}
/*下面是可选的眼罩：*/
李{
填充：10px；
列表样式类型：无；
}
李：悬停{
背景：#ccc；
}`
JAVASCRIPT示例：`var listElm=document.querySelector（'#infinite list'）；
//添加20个项目。
var-nextItem=1；
var loadMore=函数（）{
对于（变量i=0；i<20；i++）{
var item=document.createElement（'li'）；
item.innerText='item'+nextItem++；
listElm.appendChild（项目）；
}
}
//当滚动到底部时检测。
addEventListener（'scroll'，function（）{
如果（listElm.scrollTop+listElm.clientHeight>=listElm.scrollHeight）{
loadMore（）；
}
});
//最初加载一些项目。
loadMore（）；
`

我确实知道infinute滚动，并在末尾加载剩余的记录。我想知道如何估计总记录数的滚动量。但实际上我发现了一个更有趣的东西，叫做虚拟卷轴。看起来它可能适合我的需要。一旦我用它做实验，我会给出一个回应。