前置插入消息元素时滚动位置异常，加载历史消息后停在顶部如何解决

问题原因 #

当你滚动到列表顶部时scrollTop = 0，浏览器自带的滚动锚定机制找不到位于视口内的锚点元素，prepend新元素到顶部后，滚动位置保持为0，就停在了新加载的内容顶部，因此会重复触发加载逻辑。非顶部滚动时锚点机制正常工作，所以滚动位置可以保持不变。

推荐方案：JS实现（兼容性100%，逻辑可控） #

只需要修改你的loadMore函数，插入新元素前后计算高度差并调整滚动位置即可，不影响原有其他逻辑：

function loadMore() {
    const $list = $('.list')
    // 插入前记录当前内容高度与滚动位置的差值
    const preOffset = $list[0].scrollHeight - $list.scrollTop()
    loadCount++;
    for(let i=0; i < 5; i++) {
        addElement(loadCount + '-' + (i+1))
    }
    // 插入后补回差值，保持原有可见内容位置不变
    $list.scrollTop($list[0].scrollHeight - preOffset)
}

不建议采用“添加内容前先向下滚动一小段”的思路，会出现可见的滚动闪动，用户体验远不如上面的高度差计算方案，后者调整滚动位置的过程用户完全感知不到，非常平滑。

CSS方案（兼容性有限，仅高版本Chromium内核浏览器支持） #

可以给滚动容器加scroll-position-adjustment: block-size属性，该属性会自动调整滚动位置，保持视口内的可见内容位置不变，但目前Safari、火狐均未支持，不建议生产环境使用：

.list {
  width: 50%;
  height: 20rem;
  background: yellow;
  overflow-y: auto;
  scroll-position-adjustment: block-size;
}

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