当前位置：首页 > news >正文

vue3 + element-plus中el-dialog对话框滚动条回到顶部

news 来源：原创 2025/5/2 0:21:34

对话框滚动条回到顶部

1、需要对话框显示后

2、使用 nextTick 等待 Dom 更新完毕

3、通过开发者工具追查到滚动条对应的标签及class=“el-overlay-dialog”

4、设置属性 scrollTop = 0 或者执行方法 scrollTo(0, 0)

// 对话框显示标识
const dialogVisible = ref(false);
// 显示对话框
const showDialog = () => {dialogVisible.value = true;nextTick(() => {// 返回顶部onTopClick();});
};// 返回顶部
const onTopClick = () => {// 对话框滚动条回到顶部// js的写法// document.querySelector(".el-overlay-dialog").scrollTop = 0;// ts的写法1：强制类型转换，设置属性 scrollTop = 0// (document.querySelector(".el-overlay-dialog") as HTMLElement).scrollTop = 0;// ts的写法2：增加非空安全检查，设置属性 scrollTop = 0// const dialogScrollbar = document.querySelector(".el-overlay-dialog") as HTMLElement | null;// if (dialogScrollbar) {//   dialogScrollbar.scrollTop = 0;// }// ts的写法3：使用可选链操作符，执行方法 scrollTo(0, 0)(document.querySelector(".el-overlay-dialog") as HTMLElement)?.scrollTo(0, 0);
};