js向下滚动加载更多数据scroll

实现向下滚动加载更多数据可以使用 JavaScript 监听滚动事件，当滚动到底部时，发送请求获取更多数据并将其添加到页面中。

以下是一个简单的实现方式：

1.在 HTML 中添加一个用于显示数据的容器，如：

<div id="data-container"></div>

2.设置 CSS 样式，使容器具有滚动条，如：

#data-container {
  height: 500px;
  overflow-y: scroll;
}

3.使用 JavaScript 监听容器的滚动事件，判断是否滚动到底部，如：

const container = document.getElementById('data-container');

container.addEventListener('scroll', () => {
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    // 到达底部，发送请求获取更多数据
  }
});

4.当滚动到底部时，发送请求获取更多数据并将其添加到容器中，如：

const container = document.getElementById('data-container');

container.addEventListener('scroll', () => {
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    // 到达底部，发送请求获取更多数据
    fetch('url/to/get/more/data')
      .then(response => response.json())
      .then(data => {
        // 将数据添加到容器中
        data.forEach(item => {
          const element = document.createElement('div');
          element.innerText = item;
          container.appendChild(element);
        });
      });
  }
});

以上就是一个简单的向下滚动加载更多数据的实现方式。