Javascript 虚拟滚动实现使向下滚动可滚动到末尾

使用动态改变大小的顶部和底部元素的方法可能不会可靠地工作.这样做的原因是当顶部div的高度改变时，浏览器会在父滚动容器上触发一个layout操作，这反过来又会改变滚动位置.

然后，您会遇到在循环中调用滚动处理程序的情况，因为处理程序中的逻辑最终会触发滚动容器更改其滚动位置.顺理成章地说，这也是开发"聊天"界面复杂得令人惊讶的原因之一，因为上面添加了新的内容("消息").

这个数字周围的quick Google search表示这是一个常见的问题.

相反，您可以做的是丢弃顶部/底部容器，并使用absolute定位的组合，其中top用于顶部间距，padding-bottom用于底部间距.因为绝对定位将容器带出布局，所以当top改变时它不会触发滚动事件，所以它不会陷入循环.

你对每一面所需空间的计算是准确的，所以我们只需使用你现有的计算，但插入到这些css属性.额外的好处是，完成整个工作的工作量/复杂性略低，并且不会对您已有的主要实现进行重大更改.

注意CSS和JS都需要修改.这是一个codepen.

class VirtualScroll {
  constructor(selector, visibleRows = 0, amount, rowHeight) {
    this.scrollContainer = document.querySelector(selector);

    if (!this.scrollContainer) {
      return false;
    }

    this.rowHeight = rowHeight;
    this.visibleRows = visibleRows;
    this.start = 0;

    this.data = this.createTableData(amount);

    // Создание простанство видимых блоков
    this.container = document.createElement("div");
    this.container.classList.add("scroll-container");
    this.fillContainer();

    this.scrollContainer.appendChild(this.container);
    this.container.style = `top: ${this.getTopHeight()}px; padding-bottom: ${this.getBottomHeight()}px;`;

    this.scrollContainer.addEventListener("scroll", (e) => {
      const oldStart = this.start + 0;
      this.start = Math.min(
        this.data.length - this.visibleRows - 1,
        Math.floor(e.target.scrollTop / this.rowHeight),
      );

      if (oldStart === this.start) {
        return false;
      }

      this.container.style = `top: ${this.getTopHeight()}px; padding-bottom: ${this.getBottomHeight()}px;`;
      this.fillContainer();
    });
  }

  getTopHeight() {
    return this.rowHeight * this.start;
  }

  getBottomHeight() {
    return (
      this.rowHeight * (this.data.length - (this.start + this.visibleRows + 1))
    );
  }

  createTableData(h) {
    return new Array(h).fill(0).map((_, row) => {
      return row;
    });
  }

  // Заполнение контейнера видимыми блоками
  fillContainer() {
    this.container.innerHTML = "";
    this.data
      .slice(this.start, this.start + this.visibleRows + 1)
      .map((row, rowIndex) => {
        const item = document.createElement("div");
        item.classList.add("scroll-item");
        item.innerText = row;
        item.id = this.start + " " + rowIndex + row;
        this.container.appendChild(item);
      });
  }
}

new VirtualScroll(".container", 4, 100, 30);

* {
  box-sizing:border-box;
}
.container {
  height: 120px;
  overflow-y: auto;
  position: relative;
}
.scroll-container{
  width: 100%;
  position: absolute;
}
.scroll-item {
  height: 30px;
  border: 1px solid black;
  padding: 10px;
  color: black;
}