HTML, CSS 및 jQuery를 사용하여 더 많은 콘텐츠를 로드하는 무한 스크롤을 달성하는 방법

<div id="content">
  <ul id="list">
    <!-- 初始加载的内容 -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <!-- ... -->
  </ul>
</div>

#content {
  height: 400px;  /* 指定滚动加载区域的高度 */
  overflow-y: scroll;  /* 添加垂直滚动条 */
}

ul {
  padding: 0;
  list-style: none;
}

li {
  height: 50px;
  line-height: 50px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

$(window).scroll(function() {
  // 获取滚动条距离顶部的距离
  var scrollTop = $(this).scrollTop();
  // 获取页面的总高度
  var scrollHeight = $(document).height();
  // 获取窗口的高度
  var windowHeight = $(this).height();

  // 当滚动条距离底部还有100px时，加载更多内容
  if (scrollHeight - scrollTop - windowHeight < 100) {
    // 调用加载更多内容的函数
    loadMoreContent();
  }
});

function loadMoreContent() {
  // 模拟加载延迟
  setTimeout(function() {
    // 这里可以通过Ajax请求或其他方式来获取新的内容
    var newContent = '';
    for (var i = 0; i < 10; i++) {
      newContent += '<li>' + i + '</li>';
    }
    // 将新的内容追加到列表中
    $('#list').append(newContent);
  }, 1000);
}