解决element ui drawer组件关闭后，滚动条不复原的问题

情况一：

项目需求原因，抽屉弹窗的内容比较多，所以在样式上

使用 ::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坐标