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

【问题标题】：how to set a scroll bar size without having content如何在没有内容的情况下设置滚动条大小
【发布时间】：2020-05-03 19:07:30
【问题描述】：

我正在尝试创建一个数据网格，在该网格中我没有在开始时显示所有记录，而是希望在滚动时呈现它们。有没有办法可以根据我拥有的数据量设置滚动大小，并在用户滚动时更改开发人员中的数据。

我知道那里有网格，但我不想使用它们，想知道有哪些不同的方法。

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

【问题讨论】：

标签： javascript html datagrid

【解决方案1】：

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();
`

【讨论】：

我知道无限滚动并在最后加载剩余的记录。我想知道如何估计记录总数的滚动量。但我实际上发现了一个更有趣的东西，叫做 Virtual-scroller。看起来它可能适合我的需求。一旦我尝试它会给出回应。