HTML动态列表：内容变化时始终锚定在视口底部

需要实现如下结构的动态列表：

<div class="list-wrapper">
  <ul class="list">
    <li class="list-item"> ... </li>
    <li class="list-item"> ... </li>
    ...
    <li class="list-item"> ... </li>
  </ul>
</div>

需求细节：

• 列表项数量动态变化，新项追加至列表末尾
• 列表始终锚定在视口底部，添加新项时也保持锚定状态，不能先从顶部渲染再通过JS/TS滚动到底部，要实现从下往上渲染的效果
• 需保证无障碍（a11y）合规，源顺序必须与页面阅读顺序一致，反转列表顺序的方案因无障碍问题不可用

请问：是否仅通过CSS布局即可实现该效果，还是必须借助JS/TS强制滚动到新列表项？

可以仅通过CSS实现需求，无需依赖JS/TS强制滚动，具体实现思路如下：

核心CSS布局逻辑 #

利用CSS的弹性盒（Flexbox）或网格布局（Grid）的对齐特性，结合容器的高度限制来实现底部锚定：

方案1：Flexbox实现 #

给外层容器.list-wrapper设置以下样式：

.list-wrapper {
  /* 限制容器高度，比如占满视口剩余空间或固定高度 */
  height: 100vh;
  /* 使用flex布局，主轴垂直方向 */
  display: flex;
  flex-direction: column;
  /* 让子元素（列表）靠底部对齐 */
  justify-content: flex-end;
  /* 超出容器高度时显示垂直滚动条 */
  overflow-y: auto;
}

.list {
  /* 列表自身不拉伸，保持内容高度 */
  flex-shrink: 0;
  width: 100%;
  /* 可选：重置默认列表样式 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-item {
  /* 按需设置列表项样式，比如内边距、边框等 */
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

当新列表项追加到ul末尾时，列表整体高度增加，由于.list-wrapper设置了justify-content: flex-end，列表会始终贴合容器底部，超出部分会自动产生滚动条，且源顺序完全符合阅读顺序，无障碍友好。

方案2：Grid实现（更简洁） #

如果浏览器支持Grid布局，也可以用更简洁的写法：

.list-wrapper {
  height: 100vh;
  display: grid;
  /* 让列表单元格对齐容器底部 */
  align-content: end;
  overflow-y: auto;
}

.list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-item {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

原理和Flexbox一致，通过align-content: end让列表始终锚定容器底部，新增项时自动扩展高度并保持底部对齐。

为什么不需要JS？ #

上述CSS方案的核心是让容器的对齐规则直接控制列表的位置，而不是先渲染到顶部再调整。新项追加后，列表的自然高度增长会被容器的溢出规则处理，滚动条仅在内容超过容器高度时出现，全程无需JS干预，同时完全满足无障碍要求——DOM顺序和视觉阅读顺序一致，屏幕阅读器能正确读取列表项的顺序。

特殊场景补充 #

如果容器高度不是固定值（比如随父元素动态变化），只要确保.list-wrapper有明确的高度限制（比如height: 100%且父元素有高度），上述方案依然有效。只有当容器高度需要通过JS动态计算时，才可能需要少量JS辅助，但核心的底部锚定逻辑仍由CSS完成。

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