如何解决Safari中视口外更新DOM导致的视口内容偏移问题

问题背景 #

Chrome浏览器中，在用户当前视口上方的DOM结构里新增元素时，视口内的现有内容不会发生位置偏移；但同一场景在Safari浏览器中会出现内容向下偏移，偏移距离恰好等于新增元素的高度。
该差异是不同浏览器对滚动锚定（scroll anchoring）特性的默认实现逻辑不同导致，实测列表顶部固定间隔插入新元素的场景下，Safari会出现明显的视口内容持续下移问题，严重影响用户体验。

解决方案 #

1. 手动修正滚动偏移量 #

插入新元素前后主动计算并调整滚动位置，适配所有版本的Safari，兼容性最好：

// 插入元素前记录当前滚动高度
const curScrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 计算新增元素的高度
const newEleHeight = newElement.offsetHeight
// 向视口上方目标位置插入元素
parentNode.prepend(newElement)
// 主动调整滚动位置，抵消新增元素带来的偏移
window.scrollTo(0, curScrollTop + newEleHeight)

如果是自定义的可滚动容器，将代码中的window替换为对应滚动容器的DOM节点即可。

2. 手动开启Safari滚动锚定特性 #

Safari 12.1及以上版本已经支持滚动锚定特性，仅需给滚动容器添加CSS配置即可实现和Chrome一致的表现：

.scroll-container {
  overflow-anchor: auto;
}
/* 若需要指定某类元素不作为锚点，可单独设置 */
.exclude-element {
  overflow-anchor: none;
}

3. 特殊场景反向布局适配 #

如果是消息列表、历史信息流这类需要在上部加载旧内容的场景，可以直接将列表容器设置为反向排列，新内容从容器底部插入，从根源避免顶部插入元素带来的偏移：

.message-list {
  display: flex;
  flex-direction: column-reverse;
}

使用该方案需要配套调整列表数据的排序逻辑。

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