js当DOM高度发生变化时，如何保证滚动条不变？

Question

一个聊天室的项目，当点击加载更多的时候，滚动条会自动跑到最上面

Answer 1

之前的时候我做过一个表格添加行然后滚动条始终在底部的vue demo，我的思路是

• 你有这个盒子的高，也就是加载之前的高
• 你得到这个高，在你点击加载，发送请求的时候
• 滚动条有一个scrollTop，你可以把你之前盒子的高加上之前滚动条的高度的和赋值给他
• 这样就等是记录了之前滚动条的位置，或者你想让他到最下边，我觉得都可以用这种方法
• 为了使滚动条不是很生硬的过去，你可以选择加一个loading，让你得页面不是很生硬

附上例子

// 滚动条衬底
        this.$nextTick(() => {
            let tableDom = this.$refs.table.$el.querySelector('.el-table__body-wrapper')
            tableDom.scrollTop = tableDom.scrollHeight
        })

Answer 2

如果你点击更多是刷新了页面的那滚动条自然在顶部，如果是追加在之前数据之后，那滚动条长度会变，但是距离顶部距离是不会变的