情况一:
项目需求原因,抽屉弹窗的内容比较多,所以在样式上
使用 ::v-deep .el-drawer__body {
overflow: auto;
}
给组件增加滚动条,
问题出现:
每次抽屉组件关闭,再打开后滚动条的位置一直不复原。
解决:
在组件外再加一层 div 进行v-if 动态加载,这样每次动态值为false,该部分dom元素就会被销毁,
为true时,dom结构重新渲染,滚动条位置也将复原。
情况二:
需求方面,让抽屉组件包含上下页切换的内容,
问题:
每次点击上一步 或者下一步时,滚动条的位置也不换变化,比如上一页滚动条位置为50
那么点击到下一页时,滚动距离应该重新变为0!
解决:
通过审查元素得知,滚动区域的类名为 “el-drawer__body” ,
所以我们通过
document.querySelector(".el-drawer__body").scrollTo(0,0)
这一行代码来解决这个问题
解释:
document.querySelector:获取 el-drawer__body这个类名节点
scrollTo()
方法可以使界面滚动到给定元素的指定坐标位置。
scrollTo(0,0) 让滚动位置回到0坐标