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

LeeReamond8天前0

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

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

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

最新回复 (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
返回