vue 实现聊天框滚动到底

最新推荐文章于 2025-08-06 14:36:16 发布

转载最新推荐文章于 2025-08-06 14:36:16 发布 · 699 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lemos/p/7274584.html

文章标签：

#javascript #ViewUI

本文介绍如何在Vue中使用自定义指令实现自动滚动功能，通过监听滚动事件并调整滚动位置，确保内容能够平滑滚动至最新消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在需要出现滚动条的 DOM上添加 v-scroll 属性：

<div class="chat-box" v-scroll="{auto: true}">
  <div class="dialog-box">
    <div class='' v-for="item in msgList" :key="item">
      <div v-html="item.content"></div>
    </div>
  </div>
</div>

编写自定义指令 scroll

<script>
export default {
　...
  directives: {
    scroll: {
      bind (el, binding, vnode) {
        const pause = (e) => {
          let auto = binding.value ? binding.value.auto : false
          let scrolled = el.scrollTop + el.clientHeight + 1 < el.scrollHeight
          let timeout
          window.clearTimeout(timeout)
          timeout = setTimeout(() => {
            if (auto && scrolled) {
              el.setAttribute('v-scroll2-manually', 'yes')
            } else if (auto && !scrolled) {
              el.setAttribute('v-scroll2-manually', '')
            } else {
              el.removeEventListener('scroll', pause)
            }
          }, 600)
        }
        el.addEventListener('scroll', pause)
      },
      update (el, binding, vnode) {
        if (!el.getAttribute('v-scroll2-manually')) {
          vnode.context.$nextTick(() => {
            el.scrollTop = el.scrollHeight - el.clientHeight
          })
        }
      }
    }
  }
...
}
</script>

转载于:https://www.cnblogs.com/lemos/p/7274584.html