打开el-dialog自动返回顶部标题处

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

项目上有一个需求，打开比较高的表单弹窗让标题紧贴浏览器顶部，关闭再打开时不用记住之前的打开位置依然回到顶部。

如上图需要靠顶部，关闭再打开也需要将位置重置到此。

思路

• 获取滚动区域
• 计算顶部距离
• 滚动到此处

获取滚动区域

根据图上所知，滚动容器的类名为el-dialog__wrapper 所以获取容器代码

const box = document.querySelector(".el-dialog__wrapper");

计算顶部距离

通过观察内容容器，上边距为15vh，因此得出滚动距离（即算出15vh的像素值）

const scrollTop = (box.clientHeight * 15) / 100;

滚动到此处

//滚动方法
scrollTop() {
   const box = document.querySelector(".el-dialog__wrapper");
   const scrollTop = (box.clientHeight * 15) / 100;
   box.scrollTo({
      top: scrollTop,
      // behavior: "smooth", 需要平滑滚动
   });
},

调用

在watch监听弹窗打开变量，打开时调用此方法。

watch: {
  addtableDialogVisible: {
    handler(e) {
      if (e) {
        this.scrollTop();
      }
    },
  },
},

问题

在打开弹窗时代码并没有生效，那是因为在弹窗在初始化时，display为none，计算不到高度，所以在弹窗完全打开的时候调用方法，这个时候需要使用nextTick。

scrollTop() {
  this.$nextTick(() => {
    const box = document.querySelector(".el-dialog__wrapper");
    const scrollTop = (box.clientHeight * 15) / 100;
    box.scrollTo({
      top: scrollTop,
      // behavior: "smooth", 需要平滑滚动
    });
  });
},

问题解决

弹窗已经成功置顶

全部代码

methods:{
    scrollTop() {
      this.$nextTick(() => {
        const box = document.querySelector(".el-dialog__wrapper");
        const scrollTop = (box.clientHeight * 15) / 100;
        box.scrollTo({
          top: scrollTop,
          // behavior: "smooth", 需要平滑滚动
        });
      });
    },
},
watch: {
  dialogVisible: {
    handler(e) {
      if (e) {
        this.scrollTop();
      }
    },
  },
},