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

LeeReamond8天前0

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

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

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

上一篇：如何在室外构建 Homelab ？

下一篇：现在还有完全不开孔的 iPad 钢化膜吗？

最新回复 (5)

darklights8天前
引用2楼
不懂 vue ，js 和 dom 也是半桶水，不过 vue 应该有办法在 dom 层面添加事件：
new MutationObserver(() => {
yourDiv.scrollTop = yourDiv.scrollHeight;
}).observe(yourDiv, {childList: true});
4ark8天前
引用3楼
真实项目经验，将 div 180° 转换过去，也即最底部其实才是高度为 0 的地方，这样每次 append 都能在咀底部。
4ark8天前
引用4楼
附上参考文章 http://www.alloyteam.com/2020/04/14349/
bylocker8天前
引用5楼
vue-chat-scroll
haolongsun8天前
引用6楼
nextTick 能实现的，StackOverflow 一大堆这样的实现。
游客
7楼