vue3设置自定义指令，滚动条自动滚动到底部

效果图

1.首先在main.js中使用directive设定自定义指令

const app = createApp(App)
//自定义指令-列表新增元素后自动滚动底部
app.directive("scrollBottom", {
    updated(el) {
     // 这里的el即是绑定指令处的dom元素
      el.scrollTo({
        top: el.scrollHeight - el.clientHeight,
        behavior: "smooth"
      })
    }
  })

2.页面中在哪里设定需滚动条就在哪一层添加指令v-scrollBottom

 <div class="service_dialogue" v-scrollBottom></div>

3.CSS代码

.service_dialogue {
  box-sizing: border-box;
  width: 100%;
  flex: 1;
  overflow-y: auto;
}