overflow-anchor属性能否作用于伪元素？实践问题求解

核心结论 #

overflow-anchor 属性仅支持真实DOM元素，伪元素（比如::after）无法作为滚动锚点生效——因为浏览器的滚动锚定机制只识别DOM树中的真实节点，CSS生成的伪元素不在其处理范围内。

原演示生效的原因 #

原示例里用了一个真实的DOM元素（比如<div class="anchor">）作为锚点，设置overflow-anchor: auto（该属性默认值即为auto，显式设置是为了明确锚定意图）。当容器内新增内容时，浏览器会自动维持滚动位置相对于这个锚点的偏移，从而实现“保持滚动到底部”的效果。

修改后无效的原因 #

你尝试用::after伪元素设置overflow-anchor: auto，但伪元素是CSS渲染层面生成的虚拟元素，并不存在于DOM树中，滚动锚定算法无法追踪这类元素，因此无法触发锚定行为。

替代解决方案 #

如果不想在DOM中额外添加可见元素，可以用一个不可见的真实元素作为锚点，既不影响布局，又能触发滚动锚定：

/* 容器基础样式 */
.scroll-container {
  overflow-y: auto;
  height: 300px; /* 示例高度，按需调整 */
}

/* 锚点元素样式 */
.scroll-container .anchor {
  overflow-anchor: auto;
  height: 0;
  visibility: hidden;
  margin: 0;
  padding: 0;
}

在HTML结构中，确保这个.anchor元素始终位于容器的最后位置：

<div class="scroll-container">
  <!-- 动态新增的内容 -->
  <div class="content-item">新内容1</div>
  <div class="content-item">新内容2</div>
  <!-- 锚点元素 -->
  <div class="anchor"></div>
</div>

每次新增内容后无需额外操作，浏览器会自动锚定这个不可见元素，保持滚动位置始终在底部。

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