vue3中再次进入弹框el-scrollbar滚动条回到顶部

在 Vue3 中，如果你遇到在一个弹框组件（如 Element UI 的 `ElMessageBox` 或自定义的滚动区域组件里）再次显示时，滚动条自动回到顶部的问题，通常可以通过以下几种方法解决：

1. **数据驱动**：确保每次打开弹框前，你可以设置相关状态或者数据，使得滚动位置初始化为0或者顶部。例如，可以在关闭弹框后，将滚动位置重置。

data() {
  return {
    dialogScrollTop: 0,
  }
},
beforeShow() {
  this.dialogScrollTop = 0; // 这是在显示弹框之前把滚动位置设为顶部
},

2. **生命周期钩子**：如果是在组件的显示过程中动态影响滚动条，可以考虑使用 `mounted` 生命周期钩子：

mounted() {
  if (this.$refs.scrollArea) { // 检查是否有需要滚动的元素
    this.$refs.scrollArea.scrollTop = 0;
  }
}

这里的 `$refs.scrollArea` 是你在模板中对滚动区域元素的引用。

3. **事件监听**：也可以在滚动事件上做文章，当弹框关闭后再触发滚动到顶部的事件。

watch: {
  show: {
    handler(val) {
      if (!val) {
        this.scrollToTop();
      }
    },
    immediate: true
  }
},
methods: {
  scrollToTop() {
    this.$nextTick(() => {
      if (this.$refs.scrollArea) {
        this.$refs.scrollArea.scrollTop = 0;
      }
    });
  }
}

以上提到的方法都依赖于具体的组件结构和你的需求，确保在实际项目中找到最适合你的那一种。