如何实现可无限滚动的Div？并创建含多个并排元素的Div

嘿，我看了你已经写了一部分代码，方向完全没问题！咱们把它补全优化，同时实现你要的无限滚动Div和多元素并排Div效果。

一、多元素并排的水平滚动Div（你的现有代码优化版） #

你用white-space: nowrap和inline-block实现并排的思路很对，这里调整细节让它更流畅美观：

CSS 代码 #

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

#horizontal-scroll-container {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: auto; /* 替换scroll，滚动条仅在需要时显示 */
  text-align: start; /* 对齐更自然 */
  white-space: nowrap;
  background: #ff4444;
  padding: 15px 0;
  scrollbar-width: thin; /* 美化Firefox滚动条 */
}

/* 美化Chrome/Edge滚动条 */
#horizontal-scroll-container::-webkit-scrollbar {
  height: 6px;
}
#horizontal-scroll-container::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 3px;
}

.horizontal-item {
  display: inline-block;
  border-radius: 50%;
  font-family: Arial;
  position: relative;
  margin-left: 20px; /* 固定间距比百分比更稳定 */
  width: 50px;
  height: 50px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff4444;
  font-weight: bold;
}

HTML 代码 #

<div id="container">
  <!-- 水平并排元素的Div -->
  <div id="horizontal-scroll-container">
    <div class="horizontal-item">1</div>
    <div class="horizontal-item">2</div>
    <div class="horizontal-item">3</div>
    <div class="horizontal-item">4</div>
    <div class="horizontal-item">5</div>
    <div class="horizontal-item">6</div>
    <div class="horizontal-item">7</div>
  </div>

二、垂直无限滚动的Div #

接下来实现滚动到底部自动加载更多内容的无限滚动效果：

CSS 代码（继续添加） #

#vertical-infinite-container {
  width: 90%;
  height: 50%;
  overflow-y: auto;
  background: #e0e0e0;
  padding: 15px;
  scrollbar-width: thin;
}

/* 美化垂直滚动条 */
#vertical-infinite-container::-webkit-scrollbar {
  width: 6px;
}
#vertical-infinite-container::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 3px;
}

.infinite-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.loading {
  text-align: center;
  padding: 10px;
  color: #666;
}

HTML 代码（补全） #

<!-- 无限滚动的Div -->
  <div id="vertical-infinite-container">
    <div class="infinite-item">初始内容 1</div>
    <div class="infinite-item">初始内容 2</div>
    <div class="infinite-item">初始内容 3</div>
    <div class="infinite-item">初始内容 4</div>
    <div class="infinite-item">初始内容 5</div>
    <div class="loading">加载中...</div>
  </div>
</div>

JavaScript 代码（实现无限滚动逻辑） #

const infiniteContainer = document.getElementById('vertical-infinite-container');
let isLoading = false;
let itemCount = 5;

// 监听滚动事件，判断是否触发加载
infiniteContainer.addEventListener('scroll', () => {
  // 提前200px触发加载，避免用户等待
  if (infiniteContainer.scrollTop + infiniteContainer.clientHeight >= infiniteContainer.scrollHeight - 200 && !isLoading) {
    loadMoreItems();
  }
});

// 模拟异步加载内容（实际项目可替换为API请求）
function loadMoreItems() {
  isLoading = true;
  const loadingElement = document.querySelector('.loading');
  loadingElement.textContent = '正在加载...';

  setTimeout(() => {
    // 生成3条新内容
    for (let i = 0; i < 3; i++) {
      itemCount++;
      const newItem = document.createElement('div');
      newItem.className = 'infinite-item';
      newItem.textContent = `加载的内容 ${itemCount}`;
      // 插入到加载提示前
      infiniteContainer.insertBefore(newItem, loadingElement);
    }
    loadingElement.textContent = '加载中...';
    isLoading = false;
  }, 1000);
}

关键细节说明 #

• 水平并排部分：优化了滚动条样式，用固定间距替代百分比，避免小元素间距失控；overflow-x: auto让滚动条仅在内容超出时显示，更简洁。
• 无限滚动部分：通过scroll事件监听滚动位置，用isLoading标记防止重复请求；模拟了异步加载的过程，实际开发中可以直接替换为后端API调用。

内容的提问来源于stack exchange，提问作者user6846507