Question

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

我知道那里有网格，但是我不想使用它们，并且想知道有什么不同的方法来实现它。

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

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

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

1 个答案: