vue 如何确保日志滚动条始终保持在最底下？

[LeeReamond]

前端一个 div 展示由 ws 推送来的日志，遇到一个问题是，js 代码发出命令和浏览器实际渲染有一些时间差，如果代码写做

1.更新 v-model 对象
2.将该 div 的滚动条移至最下

这样显然是不好使的，2 会比 1 先执行。理论上这种情况应该适用的是 nexttick ，但是我试了试将 2 加入 nexttick 当中并无效果。最后只能让 2 延迟执行，所以现在每次 v-model 刷新后都要过个几帧才能自动把滚动条移到最下面，强迫症表示很不爽啊。。

[darklights]

不懂 vue ，js 和 dom 也是半桶水，不过 vue 应该有办法在 dom 层面添加事件：

new MutationObserver(() => {
yourDiv.scrollTop = yourDiv.scrollHeight;
}).observe(yourDiv, {childList: true});

[4ark]

真实项目经验，将 div 180° 转换过去，也即最底部其实才是高度为 0 的地方，这样每次 append 都能在咀底部。

[4ark]

附上参考文章 http://www.alloyteam.com/2020/04/14349/

[bylocker]

vue-chat-scroll

[haolongsun]

nextTick 能实现的，StackOverflow 一大堆这样的实现。

[qrobot]

@4ark 你他妈真是个人才。 卧操