如何在小型div内创建可容纳大量div的可滚动承载区域？

1. 基础HTML结构 #

<!-- 固定在角落的feed容器 -->
<div class="corner-feed">
  <!-- feed内容项，动态新增的内容都插入到此处 -->
  <div class="feed-item">第一条feed内容</div>
  <div class="feed-item">第二条feed内容</div>
  <!-- 更多feed项 -->
</div>

2. 核心CSS配置（实现固定位置+滚动效果） #

核心实现逻辑是通过fixed固定容器位置，用overflow-y: auto实现纵向内容超出时自动生成滚动条，代码示例如下：

.corner-feed {
  /* 固定在右下角，可根据需求调整位置参数 */
  position: fixed;
  right: 16px;
  bottom: 16px;
  /* 自定义容器尺寸 */
  width: 300px;
  height: 400px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  /* 滚动核心属性：纵向内容超出自动显示滚动条，横向超出隐藏 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 可选：开启顺滑滚动效果 */
  scroll-behavior: smooth;
  /* 可选：避免内容贴边，盒模型设为border-box避免padding撑大容器 */
  padding: 8px;
  box-sizing: border-box;
}

/* feed项基础样式，可根据需求自定义 */
.feed-item {
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #f5f5f5;
}

/* 可选：自定义滚动条样式，优化视觉效果 */
.corner-feed::-webkit-scrollbar {
  width: 6px;
}
.corner-feed::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.corner-feed::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

3. 大量内容适配方案 #

• 如果feed项数量在100条以内，上述基础配置完全够用，直接往.corner-feed容器里插入.feed-item元素即可，浏览器原生滚动可以流畅支持。
• 如果需要容纳上千甚至更多feed项，可以用虚拟滚动优化，核心逻辑是只渲染当前可视区域内的feed项，其余区域用空白占位符撑高，滚动时动态替换可视区域的内容，避免大量DOM节点占用内存导致卡顿，核心逻辑参考：

// 假设单条feed高度固定为50px，总共有10000条feed数据
const itemHeight = 50
const totalCount = 10000
const container = document.querySelector('.corner-feed')
// 计算可视区域可展示的item数量
const visibleCount = Math.ceil(container.clientHeight / itemHeight)

container.addEventListener('scroll', () => {
  // 计算当前滚动偏移量对应的起始item索引
  const startIndex = Math.floor(container.scrollTop / itemHeight)
  // 只渲染当前可视区域前后2条+可视区域内的item，大幅减少DOM数量
  const renderData = totalData.slice(Math.max(0, startIndex - 2), startIndex + visibleCount + 2)
  // 把renderData渲染到容器，同时设置容器内顶部占位高度为 startIndex * itemHeight 撑住整体滚动高度
})

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